<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 6.1.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/themes/green/pace-theme-minimal.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js" integrity="sha256-gqd7YTjg/BtfqWSwsJOvndl0Bxc8gFImLEkXQT8+qj0=" crossorigin="anonymous"></script>

<script class="next-config" data-name="main" type="application/json">{"hostname":"liukairui.me","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.10.1","exturl":false,"sidebar":{"position":"left","display":"hide","padding":18,"offset":12},"copycode":true,"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":true,"pangu":true,"comments":{"style":"tabs","active":"valine","storage":true,"lazyload":false,"nav":null,"activeClass":"valine"},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>

    <meta name="description" content="尚硅谷前端课程系列ES6-11部分(补充2021年最新的ES12),与JS模块化内容.主讲:尚硅谷李强,张晓飞,视频来自B站:BV1uK411H7on与BV18s411E7Tj.">
<meta property="og:type" content="article">
<meta property="og:title" content="ES6-12与JS模块化笔记">
<meta property="og:url" content="http://liukairui.me/article/ES6-12%E4%B8%8E%E6%A8%A1%E5%9D%97%E5%8C%96%E7%AC%94%E8%AE%B0/">
<meta property="og:site_name" content="LiuKairui Website">
<meta property="og:description" content="尚硅谷前端课程系列ES6-11部分(补充2021年最新的ES12),与JS模块化内容.主讲:尚硅谷李强,张晓飞,视频来自B站:BV1uK411H7on与BV18s411E7Tj.">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-06-17T17:49:56.000Z">
<meta property="article:modified_time" content="2021-10-18T06:44:13.578Z">
<meta property="article:author" content="Liu Kairui">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="笔记">
<meta property="article:tag" content="JavaScript">
<meta property="article:tag" content="ES6">
<meta property="article:tag" content="JS模块化">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://liukairui.me/article/ES6-12%E4%B8%8E%E6%A8%A1%E5%9D%97%E5%8C%96%E7%AC%94%E8%AE%B0/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"http://liukairui.me/article/ES6-12%E4%B8%8E%E6%A8%A1%E5%9D%97%E5%8C%96%E7%AC%94%E8%AE%B0/","path":"article/ES6-12与模块化笔记/","title":"ES6-12与JS模块化笔记"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>ES6-12与JS模块化笔记 | LiuKairui Website</title>
  

  <script src="/js/third-party/analytics/baidu-analytics.js"></script>
  <script async src="https://hm.baidu.com/hm.js?ea07bceb8f5fa721da2ebf01833faa32"></script>



<div class="nindexBK">
<div class="nindexBKC"></div>
<div class="nindex">
  <h1>Hey👋</h1>
  <p style="font-weight: 500; font-size: 2.2em">欢迎访问Liu Kairui的个人站.</p>
  <p>
      我是一个来自重庆的在校大学生, 偏爱于前端技术<!--与OS设计-->, 偶尔使用 JS / Go 进行轻量项目开发, 欢迎访问我的
      <a href="https://github.com/KairuiLiu" target="_blank"><i class="fab fa-github-alt"></i> GitHub</a> .
  </p>
  <p>
      这个网站主要用来存储学习 / 瞎搞的笔记, 同时提供了邮件、图床等服务. 对于一些自认为有趣的<a href="javascript:;" id="myProj">项目</a>, 我也会将项目介绍, 文档, 甚至是设计指南发布在这里.
  </p>
  <ul>
    <li><p><a href="/artrank/" target="_blank">ArtRank</a>: 基于Node.JS的PageRank文献管理推荐系统</p></li>
    <li><p><a href="/gooj/" target="_blank">GoOJ</a>: 基于Golang的高校在线评测系统</p></li>
    <li><p><a href="/projects/" target="_blank">更多 <i class="fas fa-angle-right"></i></a></p></li>

  </ul>
  <p>
      可以在这些平台找到我: 
      <a href="https://www.zhihu.com/people/liu-kai-rui-18" target="_blank">知乎</a>,
      <a href="https://space.bilibili.com/33238144" target="_blank">bilibili</a>
      和
      <a href="https://www.coolapk.com/u/805314?from=qr" target="_blank">酷安</a>.
  </p>

  <p>
      下滑即可进入博客 <i class="fas fa-arrow-down"></i>
  </p>
</div>
</div>  

 
<script>
  var OriginTitile = document.title;
  var titleTime;
  document.addEventListener("visibilitychange", function() {
    if (document.hidden) {
      document.title = "谢谢离开 | " + OriginTitile;
      clearTimeout(titleTime);
    } else {
      document.title = "欢迎归来 | " + OriginTitile;
      titleTime = setTimeout(function() {
        document.title = OriginTitile;
      }, 2000);
    }
  });
</script>


<script>
  function checkIndex(){
    let nindexItems = [[".nindexBK","display","block","none"],[".headband","display","none","block"],["div.toggle.sidebar-toggle","visibility","hidden","visible"]]; // ,["button.darkmode-toggle","visibility","hidden","visible"]];
    let isIndex = new RegExp("^(\/){0,1}(index){0,1}(\.html){0,1}(/)*$").test(location.pathname);
    let backCanvas = document.querySelector(".nindexBK");
    nindexItems.dispShift = function (stat){this.forEach((e) => {try{document.querySelector(e[0]).style[e[1]]=e[2+stat];}catch{}})}
    if(isIndex){
      nindexItems.dispShift(0);
      window.onscroll=function(){
        if(document.documentElement.scrollTop>backCanvas.offsetHeight*1.05){
          nindexItems.dispShift(1);window.onscroll=null;
        }
      }
      document.querySelector("#myProj").onclick=()=>{
        let projlist = document.querySelector(".nindex>ul");
        projlist.className.indexOf("ulactive")==-1?projlist.classList.add("ulactive"):projlist.classList.remove("ulactive")
      }
    }else nindexItems.dispShift(1);
  }
  checkIndex();
</script>

<!--<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>-->

  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
<link rel="alternate" href="/atom.xml" title="LiuKairui Website" type="application/atom+xml">
<style>.darkmode--activated{--body-bg-color:#282828;--content-bg-color:#333;--card-bg-color:#555;--text-color:#ccc;--blockquote-color:#bbb;--link-color:#ccc;--link-hover-color:#eee;--brand-color:#ddd;--brand-hover-color:#ddd;--table-row-odd-bg-color:#282828;--table-row-hover-bg-color:#363636;--menu-item-bg-color:#555;--btn-default-bg:#222;--btn-default-color:#ccc;--btn-default-border-color:#555;--btn-default-hover-bg:#666;--btn-default-hover-color:#ccc;--btn-default-hover-border-color:#666;--highlight-background:#282b2e;--highlight-foreground:#a9b7c6;--highlight-gutter-background:#34393d;--highlight-gutter-foreground:#9ca9b6}.darkmode--activated img{opacity:.75}.darkmode--activated img:hover{opacity:.9}.darkmode--activated code{color:#69dbdc;background:0 0}button.darkmode-toggle{z-index:9999}.darkmode-ignore,img{display:flex!important}</style></head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">LiuKairui Website</p>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">要有信仰</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li>
        <li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li>
        <li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fas fa-hashtag fa-fw"></i>标签</a></li>
        <li class="menu-item menu-item-收藏夹"><a href="/favorites/" rel="section"><i class="fab fa-gratipay fa-fw"></i>收藏夹</a></li>
        <li class="menu-item menu-item-留言板"><a href="/messageBoard/" rel="section"><i class="fab fa-facebook-messenger fa-fw"></i>留言板</a></li>
        <li class="menu-item menu-item-项目"><a href="/projects/" rel="section"><i class="fa fa-satellite fa-fw"></i>项目</a></li>
        <li class="menu-item menu-item-图床"><a href="http://img.liukairui.me/" rel="noopener" target="_blank"><i class="fa fa-bed fa-fw"></i>图床</a></li>
        <li class="menu-item menu-item-云ide"><a href="http://vsc.liukairui.me/" rel="noopener" target="_blank"><i class="fas fa-code fa-fw"></i>云IDE</a></li>
        <li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li>
        <li class="menu-item menu-item-邮箱"><a href="http://mail.liukairui.me/mail" rel="noopener" target="_blank"><i class="fas fa-envelope-open-text fa-fw"></i>邮箱</a></li>
        <li class="menu-item menu-item-rss"><a href="/atom.xml" rel="section"><i class="fa fa-rss fa-fw"></i>RSS</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#es%E4%BB%8B%E7%BB%8D"><span class="nav-number">1.</span> <span class="nav-text">ES介绍</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#es6%E6%96%B0%E7%89%B9%E6%80%A7"><span class="nav-number">2.</span> <span class="nav-text">ES6新特性</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#eval%E5%87%BD%E6%95%B0es3%E5%87%BD%E6%95%B0%E8%A1%A5%E5%85%85"><span class="nav-number">2.1.</span> <span class="nav-text">eval函数(ES3函数补充)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#let%E5%85%B3%E9%94%AE%E5%AD%97"><span class="nav-number">2.2.</span> <span class="nav-text">let关键字</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#const%E5%85%B3%E9%94%AE%E5%AD%97"><span class="nav-number">2.3.</span> <span class="nav-text">const关键字</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8F%98%E9%87%8F%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC"><span class="nav-number">2.4.</span> <span class="nav-text">变量解构赋值</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="nav-number">2.5.</span> <span class="nav-text">模板字符串</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AE%80%E5%8C%96%E5%AF%B9%E8%B1%A1%E5%86%99%E6%B3%95"><span class="nav-number">2.6.</span> <span class="nav-text">简化对象写法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0"><span class="nav-number">2.7.</span> <span class="nav-text">箭头函数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%87%BD%E6%95%B0%E9%BB%98%E8%AE%A4%E5%8F%82%E6%95%B0"><span class="nav-number">2.8.</span> <span class="nav-text">函数默认参数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#rest%E5%8F%82%E6%95%B0"><span class="nav-number">2.9.</span> <span class="nav-text">REST参数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#spread%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-number">2.10.</span> <span class="nav-text">...Spread扩展运算符</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#symbol-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="nav-number">2.11.</span> <span class="nav-text">Symbol 数据类型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%AD%E4%BB%A3%E5%99%A8"><span class="nav-number">2.12.</span> <span class="nav-text">迭代器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%94%9F%E6%88%90%E5%99%A8"><span class="nav-number">2.13.</span> <span class="nav-text">生成器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#promise"><span class="nav-number">2.14.</span> <span class="nav-text">Promise</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#set"><span class="nav-number">2.15.</span> <span class="nav-text">Set</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#map"><span class="nav-number">2.16.</span> <span class="nav-text">Map</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#class-%E7%B1%BB"><span class="nav-number">2.17.</span> <span class="nav-text">class 类</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%95%B0%E5%80%BC%E6%89%A9%E5%B1%95"><span class="nav-number">2.18.</span> <span class="nav-text">数值扩展</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95%E7%9A%84%E6%89%A9%E5%B1%95"><span class="nav-number">2.19.</span> <span class="nav-text">对象方法的扩展</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="nav-number">2.20.</span> <span class="nav-text">模块化</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#es7%E6%96%B0%E7%89%B9%E6%80%A7"><span class="nav-number">3.</span> <span class="nav-text">ES7新特性</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#array%E7%9A%84includes"><span class="nav-number">3.1.</span> <span class="nav-text">Array的includes</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="nav-number">3.2.</span> <span class="nav-text">**运算符</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#es8%E6%96%B0%E7%89%B9%E6%80%A7"><span class="nav-number">4.</span> <span class="nav-text">ES8新特性</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#async-await"><span class="nav-number">4.1.</span> <span class="nav-text">async &amp; await</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95%E7%9A%84%E6%89%A9%E5%B1%95-1"><span class="nav-number">4.2.</span> <span class="nav-text">对象方法的扩展</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#es9%E6%96%B0%E7%89%B9%E6%80%A7"><span class="nav-number">5.</span> <span class="nav-text">ES9新特性</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#rest%E5%8F%82%E6%95%B0%E4%B8%8Espread%E6%89%A9%E5%B1%95"><span class="nav-number">5.1.</span> <span class="nav-text">REST参数与Spread扩展</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%AD%A3%E5%88%99%E6%89%A9%E5%B1%95"><span class="nav-number">5.2.</span> <span class="nav-text">正则扩展</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#es10%E6%96%B0%E7%89%B9%E6%80%A7"><span class="nav-number">6.</span> <span class="nav-text">ES10新特性</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#object.fromentries%E6%96%B9%E6%B3%95"><span class="nav-number">6.1.</span> <span class="nav-text">Object.fromEntries方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#trimstarttrimend%E6%96%B9%E6%B3%95"><span class="nav-number">6.2.</span> <span class="nav-text">trimStart&#x2F;trimEnd方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#array.flatflatmap%E6%96%B9%E6%B3%95"><span class="nav-number">6.3.</span> <span class="nav-text">Array.flat&#x2F;flatMap方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#symbol.description%E6%96%B9%E6%B3%95"><span class="nav-number">6.4.</span> <span class="nav-text">Symbol.description方法</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#es11%E6%96%B0%E7%89%B9%E6%80%A7"><span class="nav-number">7.</span> <span class="nav-text">ES11新特性</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%A7%81%E6%9C%89%E5%B1%9E%E6%80%A7"><span class="nav-number">7.1.</span> <span class="nav-text">私有属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#promise.allsettled%E6%96%B9%E6%B3%95"><span class="nav-number">7.2.</span> <span class="nav-text">Promise.allSettled方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#string.matchall%E6%96%B9%E6%B3%95"><span class="nav-number">7.3.</span> <span class="nav-text">String.matchAll方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8F%AF%E9%80%89%E9%93%BE%E6%93%8D%E4%BD%9C%E7%AC%A6%E5%8F%B7"><span class="nav-number">7.4.</span> <span class="nav-text">可选链操作符号</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8A%A8%E6%80%81import"><span class="nav-number">7.5.</span> <span class="nav-text">动态Import</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#bigint%E7%B1%BB%E5%9E%8B"><span class="nav-number">7.6.</span> <span class="nav-text">BigInt类型</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#es12%E6%96%B0%E7%89%B9%E6%80%A7"><span class="nav-number">8.</span> <span class="nav-text">ES12新特性</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#replaceall"><span class="nav-number">8.1.</span> <span class="nav-text">replaceAll</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#promise.any"><span class="nav-number">8.2.</span> <span class="nav-text">Promise.any</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#weakrefs"><span class="nav-number">8.3.</span> <span class="nav-text">WeakRefs</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%80%BB%E8%BE%91%E8%BF%90%E7%AE%97%E7%AC%A6%E5%92%8C%E8%B5%8B%E5%80%BC%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="nav-number">8.4.</span> <span class="nav-text">逻辑运算符和赋值表达式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%95%B0%E5%AD%97%E5%88%86%E9%9A%94%E7%AC%A6"><span class="nav-number">8.5.</span> <span class="nav-text">数字分隔符</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#js%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="nav-number">9.</span> <span class="nav-text">JS模块化</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A6%82%E8%BF%B0"><span class="nav-number">9.1.</span> <span class="nav-text">概述</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#commonjs"><span class="nav-number">9.2.</span> <span class="nav-text">CommonJS</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#amd"><span class="nav-number">9.3.</span> <span class="nav-text">AMD</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#cmd"><span class="nav-number">9.4.</span> <span class="nav-text">CMD</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#es6"><span class="nav-number">9.5.</span> <span class="nav-text">ES6</span></a></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Liu Kairui"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">Liu Kairui</p>
  <div class="site-description" itemprop="description">LiuKairui Persional Website</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">45</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">24</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">53</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author site-overview-item animated">
      <span class="links-of-author-item">
        <a href="https://github.com/KairuiLiu" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;KairuiLiu" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:tclkr@live.com" title="E-Mail → mailto:tclkr@live.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://qm.qq.com/cgi-bin/qm/qr?k=oaf3ToOlN17hr5sHV98bT8qxsNYGaw5L&noverify=0" title="QQ → https:&#x2F;&#x2F;qm.qq.com&#x2F;cgi-bin&#x2F;qm&#x2F;qr?k&#x3D;oaf3ToOlN17hr5sHV98bT8qxsNYGaw5L&amp;noverify&#x3D;0" rel="noopener" target="_blank"><i class="fab fa-qq fa-fw"></i>QQ</a>
      </span>
      <span class="links-of-author-item">
        <a href="/atom.xml" title="RSS → &#x2F;atom.xml"><i class="fa fa-rss fa-fw"></i>RSS</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://liukairui.blog.csdn.net/" title="CSDN → https:&#x2F;&#x2F;liukairui.blog.csdn.net" rel="noopener" target="_blank"><i class="fab fa-cuttlefish fa-fw"></i>CSDN</a>
      </span>
      <span class="links-of-author-item">
        <a href="http://liukairui.cc/" title="国内站点 → http:&#x2F;&#x2F;liukairui.cc" rel="noopener" target="_blank"><i class="fa fa-globe fa-fw"></i>国内站点</a>
      </span>
  </div>
  <div class="cc-license site-overview-item animated" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" class="cc-opacity" rel="noopener" target="_blank"><img src="https://cdnjs.cloudflare.com/ajax/libs/creativecommons-vocabulary/2020.11.3/assets/license_badges/small/by_nc_sa.svg" alt="Creative Commons"></a>
  </div>


  <div class="links-of-blogroll site-overview-item animated">
    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
      友情链接
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="https://paste.ubuntu.com/" title="https:&#x2F;&#x2F;paste.ubuntu.com&#x2F;" rel="noopener" target="_blank">Ubuntu Pastebin</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://send.firefox.com/" title="https:&#x2F;&#x2F;send.firefox.com&#x2F;" rel="noopener" target="_blank">Firefox Send</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://jkwzs.cn/" title="https:&#x2F;&#x2F;jkwzs.cn&#x2F;" rel="noopener" target="_blank">南花醉笔丶の个人博客</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://ywrby.cn/" title="https:&#x2F;&#x2F;ywrby.cn&#x2F;" rel="noopener" target="_blank">Ywrby个人博客</a>
        </li>
    </ul>
  </div>

        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://liukairui.me/article/ES6-12%E4%B8%8E%E6%A8%A1%E5%9D%97%E5%8C%96%E7%AC%94%E8%AE%B0/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="Liu Kairui">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="LiuKairui Website">
      <meta itemprop="description" content="LiuKairui Persional Website">
    </span>
    
    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="ES6-12与JS模块化笔记 | LiuKairui Website">
      <meta itemprop="description" content="尚硅谷前端课程系列ES6-11部分(补充2021年最新的ES12),与JS模块化内容.主讲:尚硅谷李强,张晓飞,视频来自B站:BV1uK411H7on与BV18s411E7Tj.">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          ES6-12与JS模块化笔记
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-06-18 01:49:56" itemprop="dateCreated datePublished" datetime="2021-06-18T01:49:56+08:00">2021-06-18</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF/JS/" itemprop="url" rel="index"><span itemprop="name">JS</span></a>
        </span>
    </span>

  
    <span id="/article/ES6-12%E4%B8%8E%E6%A8%A1%E5%9D%97%E5%8C%96%E7%AC%94%E8%AE%B0/" class="post-meta-item leancloud_visitors" data-flag-title="ES6-12与JS模块化笔记" title="阅读次数">
      <span class="post-meta-item-icon">
        <i class="far fa-eye"></i>
      </span>
      <span class="post-meta-item-text">阅读次数：</span>
      <span class="leancloud-visitors-count"></span>
    </span>
  
  <span class="post-meta-item">
    
    <span class="post-meta-item-icon">
      <i class="far fa-comment"></i>
    </span>
    <span class="post-meta-item-text">Valine：</span>
  
    <a title="valine" href="/article/ES6-12%E4%B8%8E%E6%A8%A1%E5%9D%97%E5%8C%96%E7%AC%94%E8%AE%B0/#valine-comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/article/ES6-12%E4%B8%8E%E6%A8%A1%E5%9D%97%E5%8C%96%E7%AC%94%E8%AE%B0/" itemprop="commentCount"></span>
    </a>
  </span>
  
  

<script>
    CONFIG.hostname = location.hostname;
</script>
    <span class="post-meta-break"></span>
    <span class="post-meta-item" title="本文字数">
      <span class="post-meta-item-icon">
        <i class="far fa-file-word"></i>
      </span>
      <span class="post-meta-item-text">本文字数：</span>
      <span>47k</span>
    </span>
    <span class="post-meta-item" title="阅读时长">
      <span class="post-meta-item-icon">
        <i class="far fa-clock"></i>
      </span>
      <span class="post-meta-item-text">阅读时长 &asymp;</span>
      <span>43 分钟</span>
    </span>
</div>

            <div class="post-description">尚硅谷前端课程系列ES6-11部分(补充2021年最新的ES12),与JS模块化内容.主讲:尚硅谷李强,张晓飞,视频来自B站:BV1uK411H7on与BV18s411E7Tj.</div>
        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h2 id="es介绍">ES介绍</h2>
<p>ES就是ECMAScript简称，JS就是ES的一个实现，这里ECMA(欧洲计算机制造商学会)每年发布一个ES新版本，2020年到了ES11，前置内容:
JS,Ajax,Promise</p>
<p><strong>为什么从ES6开始</strong>:
变动多，有里程碑意义，新增语法特性</p>
<p><strong>ES兼容性</strong>：<a
target="_blank" rel="noopener" href="https://caniuse.com/es6">查询网站</a>，即使不兼容我们也可以通过编译器编译成ES5</p>
<h2 id="es6新特性">ES6新特性</h2>
<h3 id="eval函数es3函数补充">eval函数(ES3函数补充)</h3>
<p><code>eval()</code>函数可计算某个字符串，并执行其中的的JavaScript代码。</p>
<ul>
<li>语法: eval(string)<br />
string: 要计算的字符串，其中含有要计算的 JavaScript
表达式或要执行的语句。</li>
<li>返回值<br />
通过计算 string 得到的值（如果有的话）。</li>
<li>说明<br />
该方法只接受原始字符串作为参数，如果 string
参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为
<code>eval()</code> 函数传递 String 对象来作为参数。</li>
<li>如果试图覆盖 eval 属性或把 eval()
方法赋予另一个属性，并通过该属性调用它，则 ECMAScript 实现允许抛出一个
EvalError 异常。</li>
<li>抛出<br />
如果参数中没有合法的表达式和语句，则抛出 SyntaxError 异常。如果非法调用
eval()，则抛出 EvalError 异常。如果传递给 eval() 的 Javascript
代码生成了一个异常，eval() 将把该异常传递给调用者。</li>
<li>虽然 eval()
的功能非常强大，但在实际使用中用到它的情况并不多。不同浏览器不同版本对eval处理有差异<br />
<strong>实例</strong> <pre class="language-js" data-language="js"><code class="language-js"><span class="token function">eval</span><span class="token punctuation">(</span><span class="token string">"x=10;y=20;document.write(x*y)"</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">eval</span><span class="token punctuation">(</span><span class="token string">"2+2"</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> x<span class="token operator">=</span><span class="token number">10</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">eval</span><span class="token punctuation">(</span>x<span class="token operator">+</span><span class="token number">17</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre> 输出 <pre class="language-none"><code class="language-none">200
4
27</code></pre></li>
<li>作用域 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token function">eval</span><span class="token punctuation">(</span><span class="token string">'var x = 123;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"I"</span><span class="token punctuation">,</span>x<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 和 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    window<span class="token punctuation">.</span><span class="token function">eval</span><span class="token punctuation">(</span><span class="token string">'var x = 123;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"I"</span><span class="token punctuation">,</span>x<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 在ES&lt;=8，得到的是
<pre class="language-none"><code class="language-none">I 123
1
I 123
1</code></pre> 在ES&gt;8得到的是 <pre class="language-none"><code class="language-none">I 123
1
I 123
123</code></pre>
在ES8-下eval是函数作用域，在ES8+下eval的作用域取决于调用者</li>
</ul>
<h3 id="let关键字">let关键字</h3>
<ul>
<li>与<code>var</code>的级别用法一样</li>
<li><code>let</code>不可以重复声明，但是<code>var</code>可以
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> varIns <span class="token operator">=</span> <span class="token string">"A"</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> varIns <span class="token operator">=</span> <span class="token string">"B"</span><span class="token punctuation">;</span> <span class="token comment">// 合法</span>
<span class="token keyword">let</span> letIns <span class="token operator">=</span> <span class="token string">"A"</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> letIns <span class="token operator">=</span> <span class="token string">"B"</span><span class="token punctuation">;</span> <span class="token comment">// 不合法</span></code></pre></li>
<li><code>let</code>具有块级作用域，<code>var</code>没有块作用域，JS的作用域有
<ul>
<li>全局作用域(例如<code>a=1</code>，那么a就是window的成员)</li>
<li>函数作用域(例如在函数中<code>var a=1</code>,
那么出了函数a就没了)</li>
<li>eval作用域</li>
<li>块作用域(例如{a=1},if(){},while(){}...,那么在括号外面a就不可用)</li>
</ul></li>
<li><code>let</code>不存在变量提升，例如 <pre class="language-none"><code class="language-none">console.log(a);       &#x2F;&#x2F; 输出undefined
var a&#x3D;1;
console.log(a);       &#x2F;&#x2F; 输出1

console.log(b);       &#x2F;&#x2F; 报错
let b&#x3D;1;
console.log(b);</code></pre></li>
<li><code>let</code>不影响作用域链
虽然是块级作用域，但是不影响如果函数内部没有变量会自动往外找</li>
</ul>
<p><strong>实例</strong></p>
<p>在以前写代码的时候我们遇到过这个问题 <pre class="language-js" data-language="js"><code class="language-js"><span class="token comment">// 我有5个button</span>
<span class="token keyword">var</span> btns <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"button"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>i <span class="token operator">&lt;</span> btns<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    btns<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span></code></pre>
这时候不管点哪个都显示5,这是因为onclick里面没有i,于是闭包传输了i,这个i是外面的i,i在变化，到点击的时候相当于是走完了
<pre class="language-js" data-language="js"><code class="language-js"><span class="token punctuation">&#123;</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">&#125;</span> <span class="token comment">//第1个循环</span>
<span class="token punctuation">&#123;</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">&#125;</span> <span class="token comment">//第2个循环</span>
<span class="token punctuation">&#123;</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">2</span><span class="token punctuation">&#125;</span> <span class="token comment">//第3个循环</span>
<span class="token punctuation">&#123;</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">3</span><span class="token punctuation">&#125;</span> <span class="token comment">//第4个循环</span>
<span class="token punctuation">&#123;</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">4</span><span class="token punctuation">&#125;</span> <span class="token comment">//第5个循环</span></code></pre>
这个时候i就是5，因为i是for的块级作用域内部变量，var没有块级作用域，第二个循环的修改会影响第一个循环的i</p>
<p>我们有两个修改方法</p>
<ul>
<li>增加参数 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> btns <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"button"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>i <span class="token operator">&lt;</span> btns<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    btns<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>idx <span class="token operator">=</span> i<span class="token punctuation">;</span>
    btns<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>idx<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span></code></pre></li>
<li>修改为let <pre class="language-js" data-language="js"><code class="language-js"><span class="token comment">// 我有5个button</span>
<span class="token keyword">var</span> btns <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"button"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>i <span class="token operator">&lt;</span> btns<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    btns<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span></code></pre></li>
</ul>
<p>相当于执行了 <pre class="language-none"><code class="language-none">&#123;let i&#x3D;0&#125; &#x2F;&#x2F;第1个循环
&#123;let i&#x3D;1&#125; &#x2F;&#x2F;第2个循环
&#123;let i&#x3D;2&#125; &#x2F;&#x2F;第3个循环
&#123;let i&#x3D;3&#125; &#x2F;&#x2F;第4个循环
&#123;let i&#x3D;4&#125; &#x2F;&#x2F;第5个循环</code></pre>
let有块级作用域，第二个循环的修改不会影响第一个循环的i=1</p>
<h3 id="const关键字">const关键字</h3>
<ul>
<li>格式于let一样</li>
<li>必须赋初值</li>
<li>建议大写</li>
<li>不能修改</li>
<li>有块级作用域</li>
<li>常量指向数组/对象的修改不算修改，因为const对象指向的地址没有变</li>
</ul>
<h3 id="变量解构赋值">变量解构赋值</h3>
<p>可以按照一定模式从数组/对象提取值，对变量进行赋值</p>
<ul>
<li><p>对数组进行解构<code>[...]=Array</code>，就是找对应元素分别对应数组，例如
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> <span class="token punctuation">[</span>a<span class="token punctuation">,</span>b<span class="token punctuation">,</span>c<span class="token punctuation">,</span>d<span class="token punctuation">]</span><span class="token operator">=</span><span class="token punctuation">[</span><span class="token number">111</span><span class="token punctuation">,</span><span class="token number">222</span><span class="token punctuation">,</span><span class="token number">333</span><span class="token punctuation">,</span><span class="token string">"789"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 不是很常用</p></li>
<li><p>可以对对象进行解构<code>&#123;...&#125;=Object</code>,要求变量名一一对应，例如
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> t<span class="token operator">=</span><span class="token punctuation">&#123;</span>
    <span class="token literal-property property">a</span><span class="token operator">:</span><span class="token number">111</span><span class="token punctuation">,</span>
    <span class="token literal-property property">b</span><span class="token operator">:</span><span class="token number">222</span><span class="token punctuation">,</span>
    <span class="token literal-property property">d</span><span class="token operator">:</span><span class="token number">333</span><span class="token punctuation">,</span>
    <span class="token function-variable function">c</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"OK"</span><span class="token punctuation">)</span><span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">let</span> <span class="token punctuation">&#123;</span>a<span class="token punctuation">,</span>b<span class="token punctuation">,</span>c<span class="token punctuation">,</span>d<span class="token punctuation">&#125;</span><span class="token operator">=</span>t<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">c</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">d</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>              <span class="token comment">// Error</span></code></pre>
解构一般用于提取方法,例如我之前要写<code>t.c()</code>就可以简写成<code>c()</code>了</p></li>
<li><p>解构时候如果数目不同/不匹配时，会尽量匹配，例如
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> <span class="token punctuation">[</span>a<span class="token punctuation">,</span>b<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span>  <span class="token comment">// a=1 b=2</span>
<span class="token keyword">let</span> <span class="token punctuation">[</span>a<span class="token punctuation">,</span>b<span class="token punctuation">,</span>c<span class="token punctuation">,</span>d<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span>  <span class="token comment">// a=1 b=2 c=3 d=undefined</span>
<span class="token keyword">let</span> t<span class="token operator">=</span><span class="token punctuation">&#123;</span>
    <span class="token literal-property property">x</span><span class="token operator">:</span><span class="token number">111</span><span class="token punctuation">,</span>
    <span class="token literal-property property">y</span><span class="token operator">:</span><span class="token number">222</span><span class="token punctuation">,</span>
    <span class="token literal-property property">z</span><span class="token operator">:</span><span class="token number">333</span><span class="token punctuation">,</span>
    <span class="token function-variable function">w</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"OK"</span><span class="token punctuation">)</span><span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">let</span> <span class="token punctuation">&#123;</span>x<span class="token punctuation">,</span>y<span class="token punctuation">&#125;</span> <span class="token operator">=</span> t<span class="token punctuation">;</span>      <span class="token comment">// x=111 y=222</span>
<span class="token keyword">let</span> <span class="token punctuation">&#123;</span>z<span class="token punctuation">,</span>w<span class="token punctuation">,</span>s<span class="token punctuation">&#125;</span> <span class="token operator">=</span> t<span class="token punctuation">;</span>    <span class="token comment">// z=333 w=[function] s=undefined</span></code></pre></p></li>
<li><p>解构支持默认值 JS确认某个参数要使用默认值是这个参数===undefined
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> <span class="token punctuation">[</span>m1<span class="token punctuation">,</span>m2<span class="token operator">=</span><span class="token string">"S"</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"A"</span><span class="token punctuation">]</span>   <span class="token comment">// m1="A" m2="S"</span>
<span class="token keyword">let</span> <span class="token punctuation">[</span>n1<span class="token punctuation">,</span>n2<span class="token operator">=</span><span class="token string">"S"</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"A"</span><span class="token punctuation">,</span><span class="token keyword">undefined</span><span class="token punctuation">]</span>   <span class="token comment">// n1="A" n2="S"</span>
<span class="token keyword">let</span> <span class="token punctuation">[</span>p1<span class="token punctuation">,</span>p2<span class="token operator">=</span><span class="token string">"S"</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"A"</span><span class="token punctuation">,</span><span class="token keyword">null</span><span class="token punctuation">]</span>   <span class="token comment">// p1="A" p2=null</span></code></pre></p></li>
<li><p>字符串的解构赋值 将字符串转化为数组 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> <span class="token punctuation">[</span>a<span class="token punctuation">,</span>b<span class="token punctuation">,</span>c<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"Liu"</span> <span class="token comment">// a="L" b="i" c="u"</span></code></pre></p></li>
<li><p>数值与布尔值解构 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> <span class="token punctuation">&#123;</span><span class="token literal-property property">toString</span><span class="token operator">:</span> s<span class="token punctuation">&#125;</span><span class="token operator">=</span><span class="token number">123</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token operator">===</span><span class="token class-name">Number</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>toString<span class="token punctuation">)</span>
<span class="token keyword">let</span> <span class="token punctuation">&#123;</span><span class="token literal-property property">toString</span><span class="token operator">:</span> r<span class="token punctuation">&#125;</span><span class="token operator">=</span><span class="token boolean">true</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>r<span class="token operator">===</span><span class="token class-name">Boolean</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>toString<span class="token punctuation">)</span></code></pre> 都是true</p></li>
<li><p>函数参数解构 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>a<span class="token punctuation">,</span>b<span class="token punctuation">]</span></span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1,2</span>
<span class="token punctuation">&#125;</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span>

<span class="token keyword">function</span> <span class="token function">foo2</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">&#123;</span>a<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">,</span>b<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">&#125;</span><span class="token operator">=</span><span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span></span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>        <span class="token comment">// 无参时默认&#123;&#125; a,b也有默认值</span>
<span class="token comment">//function foo2(&#123;a,b&#125;=&#123;a=0,b=0&#125;)&#123;   // 注意，这两种方法出的结果不同    </span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token function">foo2</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span>         <span class="token comment">// 1,2</span>
<span class="token function">foo2</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span>             <span class="token comment">// 1,0</span>
<span class="token function">foo2</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span><span class="token literal-property property">a</span><span class="token operator">:</span><span class="token keyword">undefined</span><span class="token punctuation">,</span><span class="token literal-property property">b</span><span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span> <span class="token comment">// 0,2</span>
<span class="token function">foo2</span><span class="token punctuation">(</span><span class="token punctuation">)</span>                  <span class="token comment">// 0,0</span></code></pre></p></li>
<li><p>用处</p>
<ul>
<li>交换值<code>[a,b]=[b,a]</code></li>
<li>接受函数返回对象/数组</li>
<li>函数参数定义</li>
<li>函数参数默认值</li>
<li>加载模块 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">&#123;</span> SourceMapConsumer<span class="token punctuation">,</span> SourceNode<span class="token punctuation">&#125;</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"source-map"</span><span class="token punctuation">)</span></code></pre></li>
<li>获取map值 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
map<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">"a"</span><span class="token punctuation">,</span><span class="token string">"A"</span><span class="token punctuation">)</span>
map<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">"b"</span><span class="token punctuation">,</span><span class="token string">"B"</span><span class="token punctuation">)</span>

<span class="token comment">// 获取键值</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> <span class="token punctuation">[</span>key<span class="token punctuation">,</span>value<span class="token punctuation">]</span> <span class="token keyword">of</span> map<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">&#125;</span>   

<span class="token comment">// 获取键名</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> <span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token keyword">of</span> map<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">&#125;</span>   

<span class="token comment">// 获取键值</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> <span class="token punctuation">[</span>value<span class="token punctuation">]</span> <span class="token keyword">of</span> map<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">&#125;</span></code></pre></li>
</ul></li>
<li><p>补充for的遍历</p>
<ul>
<li><code>for in</code> 便历出来的是属性</li>
<li><code>for of</code> 遍历的是value</li>
<li>手动给对象添加属性后, for in 是可以将新添加的属性遍历出来 但是for of
不行</li>
<li><code>for in</code> 的属性是使用[]不可以使用 "." eg: data['index']
instead of data.index</li>
</ul></li>
</ul>
<h3 id="模板字符串">模板字符串</h3>
<p>模板字符串使用<code>``</code>声明，支持</p>
<ul>
<li>在内容中出现换行 例如 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token string">'123\n  456\n   789'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">123
  456
   789</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> c <span class="token operator">=</span> '<span class="token number">123</span>
  <span class="token number">456</span>
   <span class="token number">789</span>'<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 输出分别是 <pre class="language-none"><code class="language-none">123
  456
   789
123
  456
   789
报错</code></pre></li>
<li>支持变量拼接，使用${} <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">"Liu"</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> spk1 <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">I'm </span><span class="token template-punctuation string">`</span></span><span class="token operator">+</span>name<span class="token operator">+</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">, Hello</span><span class="token template-punctuation string">`</span></span>
<span class="token keyword">let</span> spk2 <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">I'm </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>name<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string">, Hello</span><span class="token template-punctuation string">`</span></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>spk1<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>spk2<span class="token punctuation">)</span></code></pre></li>
</ul>
<h3 id="简化对象写法">简化对象写法</h3>
<p>可以在{}中直接写对象，例如 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> aaa <span class="token operator">=</span> <span class="token string">"aaa"</span>
<span class="token keyword">let</span> bbb <span class="token operator">=</span> <span class="token string">"bbb"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>aaa<span class="token punctuation">,</span>bbb<span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span><span class="token literal-property property">aaa</span><span class="token operator">:</span> <span class="token string">"aaa"</span><span class="token punctuation">,</span> <span class="token literal-property property">bbb</span><span class="token operator">:</span> <span class="token string">"bbb"</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>aaa<span class="token punctuation">,</span> bbb<span class="token punctuation">,</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"OK"</span><span class="token punctuation">)</span><span class="token punctuation">&#125;</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span><span class="token literal-property property">aaa</span><span class="token operator">:</span> <span class="token string">"aaa"</span><span class="token punctuation">,</span> <span class="token literal-property property">bbb</span><span class="token operator">:</span> <span class="token string">"bbb"</span><span class="token punctuation">,</span> <span class="token function-variable function">foo</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"OK"</span><span class="token punctuation">)</span><span class="token punctuation">&#125;</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span></code></pre> 结果是 <pre class="language-none"><code class="language-none">&#123;aaa: &quot;aaa&quot;, bbb: &quot;bbb&quot;&#125;
&#123;aaa: &quot;aaa&quot;, bbb: &quot;bbb&quot;&#125;
&#123;aaa: &quot;aaa&quot;, bbb: &quot;bbb&quot;, foo: ƒ&#125;
&#123;aaa: &quot;aaa&quot;, bbb: &quot;bbb&quot;, foo: ƒ&#125;</code></pre>
这里要简写的是变量,不能是常量，例如我想构造<code>&#123;"A":"A"&#125;</code>不能写<code>&#123;"A"&#125;</code></p>
<h3 id="箭头函数">箭头函数</h3>
<p>将<code>function(a,b)=&gt;&#123;//code&#125;</code>简写为<code>(a,b)=&gt;&#123;//code&#125;</code></p>
<ul>
<li>this是静态的，始终指向函数声明时所在<strong>作用域</strong>下的this(call,apply修改对
他无效)，而funcion是this指向调用者 <pre class="language-js" data-language="js"><code class="language-js">  <span class="token class-name">S</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">work1</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>

<span class="token class-name">S</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">work2</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>

<span class="token class-name">S</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">work3</span><span class="token operator">=</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> s<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">S</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
s<span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">12</span><span class="token punctuation">;</span>
s<span class="token punctuation">.</span><span class="token function">work1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
s<span class="token punctuation">.</span><span class="token function">work2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
s<span class="token punctuation">.</span><span class="token function">work3</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 输出
<pre class="language-none"><code class="language-none">window
s对象
window</code></pre></li>
<li>不能作为构造函数实例化对象，因为this不能指向对象，会报错XX不是一个构造函数</li>
<li>不能使用arguments变量 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">work1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">&#125;</span>
<span class="token keyword">function</span> <span class="token function">work2</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>arg</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arg<span class="token punctuation">)</span><span class="token punctuation">&#125;</span>
<span class="token function-variable function">work3</span><span class="token operator">=</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">&#125;</span>
<span class="token function-variable function">work4</span><span class="token operator">=</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>arg</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arg<span class="token punctuation">)</span><span class="token punctuation">&#125;</span>
<span class="token function">work1</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">)</span>    <span class="token comment">// 输出Arguments变量</span>
<span class="token function">work2</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">)</span>    <span class="token comment">// 输出数组</span>
<span class="token function">work4</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">)</span>    <span class="token comment">// 输出数组</span>
<span class="token function">work3</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">)</span>    <span class="token comment">// 报错arguments是undefined</span></code></pre></li>
<li>箭头函数还可以简写
<ul>
<li>当只有一个形参的时候可以把<code>(a)=&gt;&#123;// code&#125;</code>简写成<code>a=&gt;&#123;// code&#125;</code></li>
<li>当代码体只有一条语句的时候<code>()=&gt;&#123;// onecode&#125;</code>简写成<code>()=&gt;// onecode</code>,同时不能写return,此时语句的返回结果就是返回值，例如<code>(a)=&gt;&#123;return a*a&#125;</code>简写为<code>a=&gt;a*a</code></li>
</ul></li>
<li>特例，我想简写返回对象<code>x =&gt; &#123; foo: x &#125;</code>会报错，换成<code>x =&gt; (&#123; foo: x &#125;)</code></li>
</ul>
<p><strong>实例</strong><br />
不适合与this有关的操作，例如dom的回调 <pre class="language-none"><code class="language-none">let [btn1,btn2] &#x3D; document.querySelectorAll(&quot;button&quot;);
btn1.myflag&#x3D;true;
btn1.onclick&#x3D;function()&#123;
  setTimeout(function()&#123;
    console.log(this.myflag);
  &#125;,1000)
&#125;
btn2.myflag&#x3D;true;
btn2.onclick&#x3D;function()&#123;
  setTimeout(()&#x3D;&gt;&#123;
    console.log(this.myflag);
  &#125;,1000)
&#125;</code></pre>
点击第一个按钮是undefined，第二个是true<br />
获取所有奇数 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> s <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">i</span><span class="token operator">=></span>i<span class="token operator">%</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre></p>
<h3 id="函数默认参数">函数默认参数</h3>
<ul>
<li>略</li>
<li>与解构赋值结合 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">&#123;</span>url<span class="token operator">=</span><span class="token number">127</span><span class="token punctuation">,</span>port<span class="token operator">=</span><span class="token number">22</span><span class="token punctuation">&#125;</span><span class="token operator">=</span><span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span></span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span>port<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span><span class="token literal-property property">url</span><span class="token operator">:</span><span class="token number">128</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span><span class="token literal-property property">port</span><span class="token operator">:</span><span class="token number">23</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span><span class="token literal-property property">lalala</span><span class="token operator">:</span><span class="token number">128</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre></li>
</ul>
<h3 id="rest参数">REST参数</h3>
<p>对于function定义的函数可以使用<code>arguments</code>获取参数列表，<code>arguments</code>是一个伪数组，没有forEach等函数，我们可以使用REST参数解决,写法是...变量，
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>args<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// 结果是[1,2,3,4]</span></code></pre> 与C语言的...一样，我们也可以指定一部分，但是...必须放末尾
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span>y<span class="token punctuation">,</span><span class="token operator">...</span>args</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>args<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// 结果是[3,4]</span></code></pre></p>
<h3 id="spread扩展运算符">...Spread扩展运算符</h3>
<p>与REST的...标识一样，作用不同,rest是放在形参的位置，扩展运算符是放在调用实参的位置，用来将数组分开(类似于解构数组)
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span>   <span class="token comment">//Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]</span></code></pre> 扩展运算符只能用在函数调用时候，但是也包括如写用法
<pre class="language-js" data-language="js"><code class="language-js"><span class="token comment">// 1. 数组的合并</span>
<span class="token keyword">let</span> ary <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token operator">...</span><span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token operator">...</span><span class="token punctuation">[</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">9</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
<span class="token comment">// [1,2,3,4,5,6,7,8,9]</span>

<span class="token comment">// 2. 数组的克隆</span>
<span class="token keyword">let</span> aty_cp <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>ary<span class="token punctuation">]</span>
<span class="token comment">// 当然这是个浅拷贝</span>

<span class="token comment">// 3. 伪数组的转换</span>
<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">let</span> agms <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>arguments<span class="token punctuation">]</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>agms<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">)</span></code></pre></p>
<p><code>...</code>实际上是个语法糖</p>
<h3 id="symbol-数据类型">Symbol 数据类型</h3>
<ul>
<li>Symbol是ES6引入的一种新的数据类型</li>
<li>用来表示独一无二的值</li>
<li>他是一种类似于字符串的值，保证值是唯一的</li>
<li>Symbol值不能参与任何一种运算，外部也看不到Symbol的值是多少,
只能知道分别定义两个Symbol一定是不同的</li>
</ul>
<p><strong>创建Symbol</strong> <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> s <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span>    <span class="token comment">// 不用写new 因为是js的默认数据类型</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">,</span><span class="token keyword">typeof</span> s<span class="token punctuation">)</span>     <span class="token comment">// Symbol() symbol</span></code></pre>
我们无法知道Symbol的值，js保证内部实现独一无二</p>
<p>我们还可以为Symbol传入一个注释 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> s1 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">"Liu"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> s2 <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">"Liu"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s1<span class="token operator">===</span>s2<span class="token punctuation">)</span>     <span class="token comment">// false</span></code></pre>
但是相同的注释不是生成相同的结果，这个功能一般用于调试使用,
例如想为对象加入一个debug熟悉就可以<code>Obj[Symbol(debug)]="OK"</code>，方便我们删除,<strong>在ES10中会有新方法对注释进行利用</strong></p>
<p>我们可以像使用hash一样为相同的内容生成相同的Symbol <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> s1 <span class="token operator">=</span> Symbol<span class="token punctuation">.</span><span class="token function">for</span><span class="token punctuation">(</span><span class="token string">"Liu"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> s2 <span class="token operator">=</span> Symbol<span class="token punctuation">.</span><span class="token function">for</span><span class="token punctuation">(</span><span class="token string">"Liu"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s1<span class="token operator">===</span>s2<span class="token punctuation">)</span>     <span class="token comment">// true</span></code></pre>
<strong>Symbol的作用</strong><a
target="_blank" rel="noopener" href="https://blog.csdn.net/lu92649264/article/details/113589524">原文</a></p>
<p>Symbol的作用非常的专一，换句话说其设计出来就只有一个目的——作为对象属性的唯一标识符，防止对象属性冲突发生。</p>
<p>举个例子，你看上了公司前来的前台妹纸，想了解关于她的更多信息，于是就询问Hr同事，扫地阿姨，于是得到类似这样信息：
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> info1 <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'婷婷'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
    <span class="token literal-property property">job</span><span class="token operator">:</span> <span class="token string">'公司前台'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'平时喜欢做做瑜伽，人家有男朋友，你别指望了'</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">let</span> info2 <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
    <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'这小姑娘挺好的，挺热情的，嘿嘿嘿……'</span>
<span class="token punctuation">&#125;</span></code></pre>
显然，你需要对这两个数据进行汇总，结果，就会发现，描述都用了同一个对象属性description，于是整合的时候，就容器冲突，覆盖，导致“人家有男朋友”这么重要的信息都没注意到。</p>
<p>但是，如果要是Symbol，则完全就不要担心这个问题了： <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> info1 <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'婷婷'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
    <span class="token literal-property property">job</span><span class="token operator">:</span> <span class="token string">'公司前台'</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'description'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'平时喜欢做做瑜伽，人家有男朋友，你别指望了'</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">let</span> info2 <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
    <span class="token punctuation">[</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'description'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'这小姑娘挺好的，挺热情的，嘿嘿嘿……'</span>
<span class="token punctuation">&#125;</span></code></pre>
此时，我们对info1, info2对象进行复制，如下： <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> target <span class="token operator">=</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> info1<span class="token punctuation">,</span> info2<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
此时target对象如下所示： <pre class="language-none"><code class="language-none">&#123;name: &quot;婷婷&quot;, age: 24, job: &quot;公司前台&quot;, Symbol(description): &quot;平时喜欢做做瑜伽，人家有男朋友，你别指望了&quot;, Symbol(description): &quot;这小姑娘挺好的，挺热情的，嘿嘿嘿……&quot;&#125;</code></pre></p>
<p><strong>Symbol内置值</strong>
作为数据类型，Symbol不能像String一样直接直接使用，而是像声明一个对象一样的使用，这是因为Symbol是一个函数对象，具有成员函数，有</p>
<ul>
<li><code>Symbol.hasInstance()</code>: 判断是否是Symbol</li>
<li><code>Symbol.isConcatSpreadable</code>: 决定是否可以Spread,例如
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> c <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>a<span class="token punctuation">,</span><span class="token operator">...</span>b<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> d <span class="token operator">=</span> a<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span>
b<span class="token punctuation">[</span>Symbol<span class="token punctuation">.</span>isConcatSpreadable<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> e <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>a<span class="token punctuation">,</span><span class="token operator">...</span>b<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> f <span class="token operator">=</span> a<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">,</span>d<span class="token punctuation">,</span>e<span class="token punctuation">,</span>f<span class="token punctuation">)</span></code></pre> 结果 <pre class="language-none"><code class="language-none">[ 1, 2, 3, 4, 5, 6 ] 
[ 1, 2, 3, 4, 5, 6 ] 
[ 1, 2, 3, 4, 5, 6 ] 
[ 1, 2, 3, [ 4, 5, 6, [Symbol(Symbol.isConcatSpreadable)]: false ] ]</code></pre></li>
<li>还有一些属性是当这个Symbol作为一个函数的参数自动执行的方法，见<a
target="_blank" rel="noopener" href="https://www.vxzsk.com/1434.html">此文章</a></li>
</ul>
<p><strong>其他Symbol相关</strong></p>
<ul>
<li><p>Symbol与for…in迭代<br />
Symbols在for...in迭代中不可枚举，如果想要达到效果，借助Object.getOwnPropertySymbols(obj)这个方法。
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">;</span>

obj<span class="token punctuation">[</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">"a"</span><span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"a"</span><span class="token punctuation">;</span>
obj<span class="token punctuation">[</span>Symbol<span class="token punctuation">.</span><span class="token function">for</span><span class="token punctuation">(</span><span class="token string">"b"</span><span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"b"</span><span class="token punctuation">;</span>
obj<span class="token punctuation">[</span><span class="token string">"c"</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"c"</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span>d <span class="token operator">=</span> <span class="token string">"d"</span><span class="token punctuation">;</span>

<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token keyword">in</span> obj<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// 输出 "c" 和 "d"</span>
<span class="token punctuation">&#125;</span></code></pre></p></li>
<li><p>Symbol与JSON.stringify()<br />
当使用JSON.strIngify()时以symbol值作为键的属性会被完全忽略，例如：
<pre class="language-js" data-language="js"><code class="language-js"><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span><span class="token punctuation">[</span><span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">"foo"</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">"foo"</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// '&#123;&#125;'              </span></code></pre></p></li>
<li><p>Symbol包装器对象作为属性的键<br />
围绕原始数据类型创建一个显式包装器对象从ECMAScript
6开始不再被支持，所以new
Symbol()会报错，然而，现有的原始包装器对象，如 new Boolean、new
String以及new Number因为遗留原因仍可被创建。</p>
<p>此时，如果我们想创建一个Symbol包装器对象 (Symbol wrapper
object)，你可以使用Object()函数： <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> sym <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">"foo"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">typeof</span> sym<span class="token punctuation">;</span>     <span class="token comment">// "symbol"</span>
<span class="token keyword">var</span> symObj <span class="token operator">=</span> <span class="token function">Object</span><span class="token punctuation">(</span>sym<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">typeof</span> symObj<span class="token punctuation">;</span>  <span class="token comment">// "object"</span></code></pre>
当一个Symbol包装器对象作为一个属性的键时，这个对象将被强制转换为它包装过的symbol值：
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> sym <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">"foo"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">&#123;</span><span class="token punctuation">[</span>sym<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
obj<span class="token punctuation">[</span>sym<span class="token punctuation">]</span><span class="token punctuation">;</span>            <span class="token comment">// 1</span>
obj<span class="token punctuation">[</span><span class="token function">Object</span><span class="token punctuation">(</span>sym<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>    <span class="token comment">// 还是1</span></code></pre></p></li>
</ul>
<p><strong>总结JS数据类型</strong>: UOSNB</p>
<ul>
<li>U: undefiend</li>
<li>O: Object</li>
<li>S: String Symbol</li>
<li>N: Null Number</li>
<li>B: Boolean</li>
</ul>
<h3 id="迭代器">迭代器</h3>
<p>迭代器是一种接口，各种数据结构只要在定义的时候定义了Iterator接口(就是对象就具有Iterator成员变量)就可以完成迭代操作</p>
<ul>
<li>ES6加入了新的遍历方式 <code>for-of</code> ,
调用Iterator接口对对象进行遍历</li>
<li>ES6原生具备Iterator的对象有
<ul>
<li>Array</li>
<li>Arguments</li>
<li>Set</li>
<li>Map</li>
<li>String</li>
<li>TypedArray</li>
<li>NodeList</li>
</ul></li>
<li>Iterator的使用方法与C++的迭代器相似，创建的时候迭代器变量获得对象，在迭代器.next()后,next函数返回一个指向数据结构的首地址值，使用next进行指针的移动获得值，不断调用next达到数据结构的</li>
</ul>
<p><strong>查看使用预定义接口</strong></p>
<p>以Array为例,Iterator保存在<code>Array.prototype.Symbol(Symbol.iterator)</code>，也就是实例的<code>[].__proto__.Symbol(Symbol.iterator)</code>,他对应的值是一个对象</p>
<p>使用<code>next()</code></p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span><span class="token string">'B'</span><span class="token punctuation">,</span><span class="token string">'C'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> iterator <span class="token operator">=</span> a<span class="token punctuation">[</span>Symbol<span class="token punctuation">.</span>iterator<span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>iterator<span class="token punctuation">)</span>         <span class="token comment">// 这里的iterator是一个包含next()的对象</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>iterator<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>  <span class="token comment">// 这里的iterator不变，next()返回的是对象的0地址等内容</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>iterator<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>  <span class="token comment">// 这里的iterator不变，next()返回的是对象的1地址等内容</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>iterator<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>  <span class="token comment">// 这里的iterator不变，next()返回的是对象的2地址等内容</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>iterator<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>  <span class="token comment">// 这里的iterator不变，next()返回的是无内容</span></code></pre>
<p>结果 <pre class="language-none"><code class="language-none">&#123;value: &quot;A&quot;, done: false&#125;     &#x2F;&#x2F; 返回值是一个对象，包含value和done表示是否结束迭代
&#123;value: &quot;B&quot;, done: false&#125;
&#123;value: &quot;C&quot;, done: false&#125;
&#123;value: undefined, done: true&#125;    &#x2F;&#x2F; 遍历结束后设置done&#x3D;true</code></pre></p>
<p>使用<code>for-of</code></p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span><span class="token string">'B'</span><span class="token punctuation">,</span><span class="token string">'C'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token keyword">of</span> a<span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>          <span class="token comment">// i 保存的是Value</span>

<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token keyword">in</span> a<span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>          <span class="token comment">// i 保存的是Key</span></code></pre>
<p>在这里也见识到到Symbol的作用,他创建了Array的一个独一无二的属性</p>
<p><strong>自定义迭代器</strong></p>
<p>为类自定义一个迭代器，我们实现一个FakeArray类，他包含了姓名和一个数组，每次迭代返回<code>姓名@数组元素</code></p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">FakeArray</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span><span class="token operator">...</span>arg</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  arg<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">d<span class="token punctuation">,</span>i</span><span class="token punctuation">)</span><span class="token operator">=></span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span>
  <span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>

<span class="token comment">/**
 * let fa = new FakeArray("Liu","H","A","P","P","Y")
 * 我们的需求是for(d of fk)遍历fk.data的元素
 * 不直接使用`fk.data.forEach()`的原因是1. 不OOP思想了 2. data不安全了
 */</span>

<span class="token class-name">FakeArray</span><span class="token punctuation">.</span>prototype<span class="token punctuation">[</span>Symbol<span class="token punctuation">.</span>iterator<span class="token punctuation">]</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>  <span class="token comment">// 定义一个迭代器的构造函数</span>
  <span class="token keyword">let</span> idx <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>          <span class="token comment">// 一部分自定义代码</span>
  <span class="token keyword">return</span> <span class="token punctuation">&#123;</span>              <span class="token comment">// 迭代器应该是一个有next函数的对象</span>
    <span class="token function-variable function">next</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>         <span class="token comment">// 每次执行next函数 包含value done, 用箭头函数使得可以读到idx</span>
      <span class="token keyword">return</span> <span class="token punctuation">&#123;</span><span class="token literal-property property">value</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token operator">+</span><span class="token string">"@"</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">[</span>idx<span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">done</span><span class="token operator">:</span>idx<span class="token operator">++</span><span class="token operator">===</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>length<span class="token punctuation">&#125;</span>
    <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> fa <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FakeArray</span><span class="token punctuation">(</span><span class="token string">"Liu"</span><span class="token punctuation">,</span><span class="token string">"H"</span><span class="token punctuation">,</span><span class="token string">"A"</span><span class="token punctuation">,</span><span class="token string">"P"</span><span class="token punctuation">,</span><span class="token string">"P"</span><span class="token punctuation">,</span><span class="token string">"Y"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span>d <span class="token keyword">of</span> fa<span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span></code></pre>
<p>为对象自定义一个迭代器，我们实现一个fa对象，他包含了姓名和一个数组，每次迭代返回<code>姓名@数组元素</code></p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> fa <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  <span class="token literal-property property">name</span> <span class="token operator">:</span> <span class="token string">"Liu"</span><span class="token punctuation">,</span>
  <span class="token literal-property property">data</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token string">"happy"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token comment">// [Symbol.iterator]:function()&#123;</span>
  <span class="token punctuation">[</span>Symbol<span class="token punctuation">.</span>iterator<span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>        <span class="token comment">// 进行了简写，等同于上面注释的代码</span>
    <span class="token keyword">let</span> idx <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">&#123;</span>
      <span class="token function-variable function">next</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        <span class="token keyword">return</span> <span class="token punctuation">&#123;</span><span class="token literal-property property">value</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token operator">+</span><span class="token string">"@"</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">[</span>idx<span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token literal-property property">done</span><span class="token operator">:</span>idx<span class="token operator">++</span><span class="token operator">===</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>length<span class="token punctuation">&#125;</span>
      <span class="token punctuation">&#125;</span>
    <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">for</span><span class="token punctuation">(</span>d <span class="token keyword">of</span> fa<span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span></code></pre>
<h3 id="生成器">生成器</h3>
<p>生成器是一个函数，是一个ES6异步编程解决方案,
之前我们异步编程使用的是回调函数，但是容易形成回调地狱</p>
<p><strong>定义</strong>:
生成器函数与就是在普通函数声明前面加入了<code>*</code>,例如
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token operator">*</span> <span class="token function">gen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"hi"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token string">"GEN OK"</span>
<span class="token punctuation">&#125;</span></code></pre>
我们可以将函数的结果赋值给变量，函数不会立刻运行，变量的值是一个迭代器。函数运行，当且仅当变量执行了next(),这个时候变量的值还是迭代器，返回值要另行接受，例如
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token operator">*</span> <span class="token function">gen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"hi"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token string">"GEN OK"</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> p <span class="token operator">=</span> <span class="token function">gen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// p是gen &#123;&lt;suspended>&#125; 是一个迭代器</span>
<span class="token keyword">let</span> q <span class="token operator">=</span> p<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>    <span class="token comment">// 执行next 输出hi </span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">,</span>q<span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// p是gen &#123;&lt;closed>&#125; 迭代器 q是迭代器结果&#123;value: "GEN OK", done: true&#125;</span></code></pre> 注意，gen函数可以使用yield进行分割,</p>
<ul>
<li>yield是ES6的新关键字，使生成器函数执行暂停，yield关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的return关键字。</li>
<li>yield关键字实际返回一个IteratorResult（迭代器）对象，它有两个属性，value和done，分别代表返回值和是否完成。</li>
<li>yield无法单独工作，需要配合generator(生成器)的其他函数，如next，懒汉式操作，展现强大的主动控制特性。
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token operator">*</span> <span class="token function">gen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>               
  <span class="token comment">// ====函数第1部分====</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Part 1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">yield</span> <span class="token string">"P1"</span>                  <span class="token comment">// == 返回"P1" 不得用return否则后面代码都无效了</span>
  <span class="token comment">// ====函数第2部分====</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Part 2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">yield</span> <span class="token string">"P2"</span>                  <span class="token comment">// == 返回"P2" 不得用return否则后面代码都无效了</span>
  <span class="token comment">// ====函数第3部分====</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Part 3"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">yield</span> <span class="token string">"P3"</span>                  <span class="token comment">// == 返回"P3" 不得用return否则后面代码都无效了</span>
  <span class="token comment">// ====函数第4部分====</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Part 4"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">yield</span> <span class="token string">"P4"</span>                  <span class="token comment">// == 返回"P4" 不得用return否则后面代码都无效了</span>
  <span class="token comment">// ====函数第5部分====</span>
  <span class="token keyword">return</span> <span class="token string">"AllEnd"</span>             <span class="token comment">// == 返回"AllEnd" 不得用yield会新开一个部分</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> f <span class="token operator">=</span> <span class="token function">gen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>f<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>         <span class="token comment">// &#123; value: 'P1', done: false &#125;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>f<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>         <span class="token comment">// &#123; value: 'P2', done: false &#125;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>f<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>         <span class="token comment">// &#123; value: 'P3', done: false &#125;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>f<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>         <span class="token comment">// &#123; value: 'P4', done: false &#125;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>f<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>         <span class="token comment">// &#123; value: 'AllEnd', done: true &#125;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>f<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>         <span class="token comment">// &#123; value: undefined, done: true &#125;</span></code></pre></li>
</ul>
<p>由于生成器是一个迭代器对象，我们也可以这么写 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token operator">*</span> <span class="token function">gen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>               
    <span class="token comment">// ====函数第1部分====</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Part 1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">yield</span> <span class="token string">"P1"</span>                  <span class="token comment">// == 返回"P1" 不得用return否则后面代码都无效了</span>
    <span class="token comment">// ====函数第2部分====</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Part 2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">yield</span> <span class="token string">"P2"</span>                  <span class="token comment">// == 返回"P2" 不得用return否则后面代码都无效了</span>
    <span class="token comment">// ====函数第3部分====</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Part 3"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">yield</span> <span class="token string">"P3"</span>                  <span class="token comment">// == 返回"P3" 不得用return否则后面代码都无效了</span>
    <span class="token comment">// ====函数第4部分====</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Part 4"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">yield</span> <span class="token string">"P4"</span>                  <span class="token comment">// == 返回"P4" 不得用return否则后面代码都无效了</span>
    <span class="token comment">// ====函数第5部分====</span>
    <span class="token keyword">return</span> <span class="token string">"AllEnd"</span>             <span class="token comment">// == 返回"AllEnd" 不得用yield会新开一个部分</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>

<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> d <span class="token keyword">of</span> <span class="token function">gen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>
<span class="token comment">// Part 1</span>
<span class="token comment">// P1</span>
<span class="token comment">// Part 2</span>
<span class="token comment">// P2</span>
<span class="token comment">// Part 3</span>
<span class="token comment">// P3</span>
<span class="token comment">// Part 4</span>
<span class="token comment">// P4</span>
<span class="token comment">// 没有AllEnd,因为最后一次没用yield</span></code></pre></p>
<p><strong>yield参数传递</strong></p>
<p>如果想给某个部分的函数传递参数可以把参数写在next()，yield会获得返回值，例如
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token operator">*</span> <span class="token function">gen</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span>
    <span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token keyword">yield</span> <span class="token string">"===PART B==="</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span>
    <span class="token keyword">let</span> c <span class="token operator">=</span> <span class="token keyword">yield</span> <span class="token string">"===PART C==="</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span>
    <span class="token keyword">let</span> d <span class="token operator">=</span> <span class="token keyword">yield</span> <span class="token string">"===PART D==="</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> it <span class="token operator">=</span> <span class="token function">gen</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>it<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>it<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>it<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>it<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>it<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span>     <span class="token comment">// over bound</span></code></pre></p>
<p><strong>使用生成器避免回调地狱,实现异步操作1</strong></p>
<p>需求是1-5s,每1s输出一个数字，使用回调函数的写法是 <pre class="language-js" data-language="js"><code class="language-js"><span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span>
            <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span>
                <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span>
                <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
            <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span></code></pre>
形成回调地狱，可以进行代码的扁平化</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token operator">*</span> <span class="token function">gen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        it<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>           <span class="token comment">// 输出结束之后再调用下一部分</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token keyword">yield</span> <span class="token string">"P2"</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        it<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token keyword">yield</span> <span class="token string">"P3"</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        it<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token keyword">yield</span> <span class="token string">"P4"</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        it<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token keyword">yield</span> <span class="token string">"P5"</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        it<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> it <span class="token operator">=</span> <span class="token function">gen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
it<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>我们的需求变成五秒每秒输出一个前一个数+5的数</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token operator">*</span> <span class="token function">gen</span><span class="token punctuation">(</span><span class="token parameter">p1</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p1<span class="token operator">+</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        it<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span>p1<span class="token operator">+</span><span class="token number">5</span><span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token keyword">let</span> p2 <span class="token operator">=</span> <span class="token keyword">yield</span> <span class="token string">"P2"</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p2<span class="token operator">+</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        it<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span>p2<span class="token operator">+</span><span class="token number">5</span><span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token keyword">let</span> p3 <span class="token operator">=</span> <span class="token keyword">yield</span> <span class="token string">"P3"</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p3<span class="token operator">+</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        it<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span>p3<span class="token operator">+</span><span class="token number">5</span><span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token keyword">let</span> p4 <span class="token operator">=</span> <span class="token keyword">yield</span> <span class="token string">"P4"</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p4<span class="token operator">+</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        it<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span>p4<span class="token operator">+</span><span class="token number">5</span><span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token keyword">let</span> p5 <span class="token operator">=</span> <span class="token keyword">yield</span> <span class="token string">"P5"</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p5<span class="token operator">+</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        it<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span>p5<span class="token operator">+</span><span class="token number">5</span><span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> it <span class="token operator">=</span> <span class="token function">gen</span><span class="token punctuation">(</span><span class="token number">666</span><span class="token punctuation">)</span><span class="token punctuation">;</span>      <span class="token comment">// 注意在这里传参</span>
it<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>对于流式工作我们可以这么写</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token operator">*</span> <span class="token function">gen</span><span class="token punctuation">(</span><span class="token parameter">p1</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"do work 1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token keyword">yield</span> <span class="token string">"P1 OK"</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"do work 2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token keyword">yield</span> <span class="token string">"P2 ER"</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"do work 3"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token keyword">yield</span> <span class="token string">"P3 OK"</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"do work 4"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token keyword">yield</span> <span class="token string">"P4 OK"</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"do work 5"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token keyword">yield</span> <span class="token string">"ALL END"</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> v <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> it <span class="token operator">=</span> <span class="token function">gen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>      <span class="token comment">// 注意在这里传参</span>
<span class="token keyword">for</span><span class="token punctuation">(</span>i <span class="token keyword">of</span> it<span class="token punctuation">)</span><span class="token punctuation">&#123;</span>        <span class="token comment">// 当然，我们可以手动next方便传参 </span>
    v<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span></code></pre>
<p>结果是 <pre class="language-none"><code class="language-none">[ &#39;P1 OK&#39;, &#39;P2 ER&#39;, &#39;P3 OK&#39;, &#39;P4 OK&#39;, &#39;ALL END&#39; ]
do work 1
do work 2
do work 3
do work 4
do work 5</code></pre></p>
<ul>
<li>生成器可以与Promise结合大大简化代码</li>
<li>yield是参考python的语法，在前端中用处不大，在后端中，就显得比较重要了，因为其优越的可控性，可是极大的提升线程的效率。</li>
</ul>
<h3 id="promise">Promise</h3>
<p>略，见Promise专门内容</p>
<p><strong>将生成器与Promise结合</strong><a
target="_blank" rel="noopener" href="https://www.kanzhun.com/jiaocheng/148059.html">来源</a></p>
<p>结合生成器（以及生成器暂停和恢复执行的能力）和promise，来实现更加优雅的异步代码。
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">try</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">const</span> ninjas <span class="token operator">=</span> <span class="token function">syncGetJSON</span><span class="token punctuation">(</span><span class="token string">'data/ninja.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> missions <span class="token operator">=</span> <span class="token function">syncGetJSON</span><span class="token punctuation">(</span>ninjas<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>missionsUrl<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> missionDetails <span class="token operator">=</span> <span class="token function">syncGetJSON</span><span class="token punctuation">(</span>missions<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>detailsUrl<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">//Study the mission description</span>
<span class="token punctuation">&#125;</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token comment">//Oh no,we were not able to get the mission details</span>
<span class="token punctuation">&#125;</span></code></pre>
尽管这段代码对于简化错误处理很方便，但UI被阻塞了，用户不希望看到这个结果。则可以使用生成器和promise结合。从生成器中让渡后会挂起执行而不会发生阻塞。而且仅需调用生成器迭代器的next方法就可以唤醒生成器并继续执行。而promise在未来触发某种条件的情况下让我们得到它事先允诺的值，而且当错误发生后也会执行相应的回调函数。</p>
<p>这个方法将要以如下方式结合生成器和promise。</p>
<p>把异步任务放入一个生成器中，然后执行生成器函数。所以生成器执行的时候，我们会将执行权让渡给生成器，从而不会导致阻塞。过一会儿，当承若被兑现，我们会继续通过迭代器的next函数执行生成器。只要有需要就可以重复这个过程。</p>
<pre class="language-js" data-language="js"><code class="language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'-------------将promise和生成器结合---------'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//返回异步结果的函数在等待异步结果返回时应当能够暂停，注意function*，使用生成器</span>
<span class="token keyword">async</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token operator">*</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">try</span><span class="token punctuation">&#123;</span>
    <span class="token comment">//对每个任务均执行yield</span>
    <span class="token keyword">const</span> ninjas <span class="token operator">=</span> <span class="token keyword">yield</span> <span class="token function">getJSON</span><span class="token punctuation">(</span><span class="token string">'data/ninjas.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> missions <span class="token operator">=</span> <span class="token keyword">yield</span> <span class="token function">getJSON</span><span class="token punctuation">(</span>ninjas<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>missionsUrl<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> missionDescription <span class="token operator">=</span> <span class="token keyword">yield</span> <span class="token function">getJSON</span><span class="token punctuation">(</span>missions<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>detailsUrl<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//Study the mission description</span>
  <span class="token punctuation">&#125;</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token comment">//依旧可以使用标准的语言结构，诸如try-catch语句或循环语句</span>
    <span class="token comment">//Oh no,we were not able to get the mission details</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//定义一个辅助函数，用于对我们定义的生成器执行操作</span>
<span class="token keyword">function</span> <span class="token keyword">async</span><span class="token punctuation">(</span><span class="token parameter">generator</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token comment">//创建 一个迭代器，进而我们可以控制生成器</span>
  <span class="token keyword">var</span> iterator <span class="token operator">=</span> <span class="token function">generator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">//定义函数handle，用于对生成器产生的每个值进行处理。</span>
  <span class="token keyword">function</span> <span class="token function">handle</span><span class="token punctuation">(</span><span class="token parameter">iteratorResult</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token comment">//当生成器没有更多结果返回时停止执行。</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>iteratorResult<span class="token punctuation">.</span>done<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>

    <span class="token keyword">const</span> iteratorValue <span class="token operator">=</span> iteratorResult<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
    <span class="token comment">//如果生成的值是一个promise，则对其注册成功和失败的回调。这是异步处理的部分。如果promise成功返回，则恢复生成器的执行并传入promise的返回结果。如果遇到错误，则生成器抛出异常。</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>iteratorValue <span class="token keyword">instanceof</span> <span class="token class-name">Promise</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      iteratorValue<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span><span class="token punctuation">&#123;</span>
        <span class="token function">handle</span><span class="token punctuation">(</span>iterator<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span><span class="token punctuation">&#123;</span>
        iterator<span class="token punctuation">.</span><span class="token function">throw</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span>
 
  <span class="token comment">//重启生成器的执行</span>
  <span class="token keyword">try</span><span class="token punctuation">&#123;</span>
    <span class="token function">handle</span><span class="token punctuation">(</span>iterator<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    iterator<span class="token punctuation">.</span><span class="token function">throw</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span></code></pre>
<p>async函数内，我们声明了一个处理函数用于处理从生成器中返回的值——迭代器的一次“迭代”。如果生成器的结果是一个被成功兑现的承若，我们就是用迭代器的next方法把承诺的值返回给生成器并恢复执行。如果出现错误，承若被违背，我们就使用迭代器的throw方法抛出一个异常。直到生成器完成前，一直重复这几个操作。</p>
<p>注意：</p>
<p>这只是一个粗略的草稿，一个最小化的代码应该把生成器和promise结合在一起。不推荐生产环境下出现这些代码。</p>
<p>现在仔细看看这个生成器，在第一次调用迭代器的next方法后，生成器执行第一次getJSON('data/ninjas.json')调用。此次调用创建了一个promise，该promise会包含需要的信息。但是这个值是异步获取的，所以我们完全不知道浏览器会花多少时间来获取它。但我们明白一件事，我们不希望在等待中阻塞应用的执行。所以对于这个原因，在执行的这一刻，生成器让渡了控制权，生成器暂停，并把控制流还给了回调函数的执行。由于让渡的值是一个promise对象getJSON，在这个回调函数中，通过使用promise的then和catch方法，我们注册了一个success和一个error回调函数，从而继续了函数的执行。当浏览器接收到了响应（可能是成功的响应，也可能是失败的响应），promise的两个回调函数之一则被调用了。如果promise被成功解决，则会执行success回调函数，随之而来的是迭代器next方法的调用，用于向生成器请求新的值，从而向生成器请求新值，从而生成器从挂起状态恢复，并把得到的值回传给回调函数。这意味着，程序又重新进入到生成器函数体内，当第一次执行yield表达式后，得到的值变成从服务器端获取的信息。</p>
<p>下一行代码的生成器函数中，我们使用获取到的数据ninjas[0].missionsUrl来发起新的geJSON请求，从而创建一个新的promise对象，最后返回最新的数据。我们依然不知道这个异步任务会执行多久，所以我们再一次让渡了这次执行，并重复这个过程。只要生成器中有异步任务，这个过程就会重新执行一次。</p>
<p>这个例子有一点不同，但它结合了许多知识点：</p>
<ul>
<li>函数是第一类对象——我们向async函数了一个参数，该参数也是函数。</li>
<li>生成器函数——用它的特性来挂起和恢复执行。</li>
<li>pomise——帮我们处理异步代码。</li>
<li>回调函数——在promise对象上注册成功和失败的回调函数。</li>
<li>箭头函数——箭头函数的简洁适合用在回调函数上。</li>
<li>闭包——在我们控制生成器的过程中，迭代器在async函数内被创建，随之我们在promise的回调函数内通过闭包来获取该迭代器。</li>
</ul>
<p>逻辑代码的书写如下方式： <pre class="language-js" data-language="js"><code class="language-js"><span class="token function">getJSON</span><span class="token punctuation">(</span><span class="token string">"data/ninjas.json"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> ninjas</span><span class="token punctuation">)</span> <span class="token operator">=></span><span class="token punctuation">&#123;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Error fetchig ninjas'</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>

  <span class="token function">getJSON</span><span class="token punctuation">(</span>ninjas<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>missingsUrl<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> missions</span><span class="token punctuation">)</span> <span class="token operator">=></span><span class="token punctuation">&#123;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Error locating ninja missions"</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>missions<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></p>
<p>不同于把错误处理和流程中控制混合在一起，我们使用类似以下写法结束了代码的混乱：</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">async</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token operator">*</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">try</span><span class="token punctuation">&#123;</span>
    <span class="token comment">//对每个任务均执行yield</span>
    <span class="token keyword">const</span> ninjas <span class="token operator">=</span> <span class="token keyword">yield</span> <span class="token function">getJSON</span><span class="token punctuation">(</span><span class="token string">'data/ninjas.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> missions <span class="token operator">=</span> <span class="token keyword">yield</span> <span class="token function">getJSON</span><span class="token punctuation">(</span>ninjas<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>missionsUrl<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//Study the mission description</span>
  <span class="token punctuation">&#125;</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token comment">//依旧可以使用标准的语言结构，诸如try-catch语句或循环语句</span>
    <span class="token comment">//Oh no,we were not able to get the mission details</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>最终结果结合了同步代码和异步代码的优点。有了同步代码，我们能更容易地理解、使用标准控制流以及异常处理机制、try-catch语句能力。而对于异步代码来说，我们有着天生的阻塞：当等待长时间运行的异步任务时，应用的执行不会被阻塞。</p>
<h3 id="set">Set</h3>
<p>与数组相似，但是成员唯一，支持...扩展展开，定义了iterator接口支持for-of遍历</p>
<ul>
<li><p>声明的时候可以向里面传输一个可迭代对象，一般我们用数组</p></li>
<li><p>s.size可以获取大小</p></li>
<li><p>s.add(v)可以添加元素v</p></li>
<li><p>s.delete(v)可以删除元素v</p></li>
<li><p>s.has(v)返回s中有没有v</p></li>
<li><p>s.clear()清空s <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> s <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">,</span><span class="token keyword">typeof</span> s<span class="token punctuation">)</span><span class="token punctuation">;</span>            <span class="token comment">// Set(0) &#123;&#125; object</span>

<span class="token keyword">let</span> s2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s2<span class="token punctuation">,</span><span class="token keyword">typeof</span> s2<span class="token punctuation">)</span><span class="token punctuation">;</span>          <span class="token comment">// Set(5) &#123; 1, 2, 3, 4, 5 &#125; object</span>

s2<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">666</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s2<span class="token punctuation">)</span><span class="token punctuation">;</span>
s2<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s2<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s2<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span><span class="token number">9</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s2<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s2<span class="token punctuation">,</span>s2<span class="token punctuation">.</span>size<span class="token punctuation">)</span><span class="token punctuation">;</span>
s2<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s2<span class="token punctuation">,</span>s2<span class="token punctuation">.</span>size<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></p></li>
<li><p>数组去重 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span></code></pre></p></li>
<li><p>求交 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">9</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> s1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> s2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span>d <span class="token keyword">of</span> s1<span class="token punctuation">)</span>
  <span class="token keyword">if</span><span class="token punctuation">(</span>s2<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">)</span>res<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 简化 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">9</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> s2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr2<span class="token punctuation">)</span>
<span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr1<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>          <span class="token comment">// 进行arr1去重</span>
    <span class="token keyword">return</span> s2<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span>                                <span class="token comment">// 使用filter判断交集</span>
    <span class="token comment">// return arr2.indexOf(d)+1                     // 当然可以直接indexOf</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span></code></pre> 语法简化
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">9</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> s2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr2<span class="token punctuation">)</span>
<span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr1<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">d</span> <span class="token operator">=></span> s2<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span></code></pre></p></li>
<li><p>求并 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">9</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span>arr1<span class="token punctuation">,</span><span class="token operator">...</span>arr2<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span></code></pre></p></li>
<li><p>求补 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> s2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr2<span class="token punctuation">)</span>
<span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr1<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">d</span> <span class="token operator">=></span> <span class="token operator">!</span>s2<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span></code></pre></p></li>
</ul>
<h3 id="map">Map</h3>
<p>与C++的Map类似，键支持各种不固定数据类型，支持...,实现了迭代器支持for-of</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> m <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token comment">// 定义一个map</span>
<span class="token keyword">let</span> <span class="token constant">K3</span> <span class="token operator">=</span> <span class="token punctuation">&#123;</span><span class="token string-property property">"Name"</span><span class="token operator">:</span><span class="token string">"Liu"</span><span class="token punctuation">&#125;</span>   <span class="token comment">// 定义一个key</span>

m<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">"Key"</span><span class="token punctuation">,</span><span class="token string">"value"</span><span class="token punctuation">)</span>      <span class="token comment">// 插入一个映射，两个参数分别是key,value</span>
m<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">"Key2"</span><span class="token punctuation">,</span><span class="token punctuation">&#123;</span><span class="token string-property property">"A"</span><span class="token operator">:</span><span class="token string">"B"</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span>   <span class="token comment">// key/value 可以是基本数据类型，也可以是对象，包括函数</span>
m<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token constant">K3</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"OK"</span><span class="token punctuation">)</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span>
<span class="token comment">// Map(3) &#123;</span>
<span class="token comment">//   'Key' => 'value',</span>
<span class="token comment">//   'Key2' => &#123; A: 'B' &#125;,</span>
<span class="token comment">//   &#123; Name: 'Liu' &#125; => [Function (anonymous)]</span>
<span class="token comment">// &#125;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>m<span class="token punctuation">.</span>size<span class="token punctuation">)</span>       <span class="token comment">// 大小</span>
<span class="token comment">// 3</span>

m<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">"Key"</span><span class="token punctuation">)</span>           <span class="token comment">// 删除</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>m<span class="token punctuation">,</span>m<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token constant">K3</span><span class="token punctuation">)</span><span class="token punctuation">)</span>  <span class="token comment">// 获取value</span>
<span class="token comment">// Map(2) &#123;</span>
<span class="token comment">//   'Key2' => &#123; A: 'B' &#125;,</span>
<span class="token comment">//   &#123; Name: 'Liu' &#125; => [Function (anonymous)]</span>
<span class="token comment">// &#125; [Function (anonymous)]</span>


m<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token constant">K3</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>               <span class="token comment">// OK</span>

<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> v <span class="token keyword">of</span> m<span class="token punctuation">)</span><span class="token punctuation">&#123;</span>          <span class="token comment">// 遍历</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token comment">// [ 'Key2', &#123; A: 'B' &#125; ]</span>
<span class="token comment">// [ &#123; Name: 'Liu' &#125;, [Function (anonymous)] ]</span>

m<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Map(0) &#123;&#125;</span></code></pre>
<p>Map构造函数可以传入参数<code>[[key1,val1],[key2,val2],[key3,val3],[key4,val4]]</code></p>
<h3 id="class-类">class 类</h3>
<p>ES引入了传统语言中类的写法，实际上ES6的Class就是一个语法糖，让我们写起来看着像一个传统的class</p>
<p><strong>最简单的类定义</strong> <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">class</span> <span class="token class-name">Phone</span><span class="token punctuation">&#123;</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">brand<span class="token punctuation">,</span>price</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>       <span class="token comment">// 构造函数，名字固定，new的时候执行</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>brand <span class="token operator">=</span> brand<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>price <span class="token operator">=</span> price<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token function">getVal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>                       <span class="token comment">// 成员方法 不能写function/()=>&#123;&#125;</span>
    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span>brand<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string"> is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span>price<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token template-punctuation string">`</span></span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> phone <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Phone</span><span class="token punctuation">(</span><span class="token string">"LL"</span><span class="token punctuation">,</span><span class="token number">123</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>phone<span class="token punctuation">.</span><span class="token function">getVal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre></p>
<p><strong>静态成员</strong></p>
<p>可以和Java一样设置类的静态属性 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">class</span> <span class="token class-name">Phone</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">static</span> Name <span class="token operator">=</span> <span class="token string">"手机"</span>            <span class="token comment">// 使用static</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">brand<span class="token punctuation">,</span>price</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>brand <span class="token operator">=</span> brand<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>price <span class="token operator">=</span> price<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token function">getVal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>                       <span class="token comment">// 成员方法 不能写function/()=>&#123;&#125;</span>
    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span>brand<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string"> is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span>price<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token template-punctuation string">`</span></span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> phone1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Phone</span><span class="token punctuation">(</span><span class="token string">"LL"</span><span class="token punctuation">,</span><span class="token number">123</span><span class="token punctuation">)</span>
<span class="token keyword">let</span> phone2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Phone</span><span class="token punctuation">(</span><span class="token string">"RR"</span><span class="token punctuation">,</span><span class="token number">567</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>phone1<span class="token punctuation">.</span>Name<span class="token punctuation">)</span>  <span class="token comment">// undefined</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>phone2<span class="token punctuation">.</span>Name<span class="token punctuation">)</span>  <span class="token comment">// undefined</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Phone<span class="token punctuation">.</span>Name<span class="token punctuation">)</span>   <span class="token comment">// "手机"</span></code></pre>
静态成员属于类而不属于实例</p>
<p><strong>继承</strong></p>
<p>在ES5中继承的写法是 <pre class="language-js" data-language="js"><code class="language-js"><span class="token comment">// 父类</span>
<span class="token keyword">function</span> <span class="token function">Phone</span><span class="token punctuation">(</span><span class="token parameter">brand<span class="token punctuation">,</span>price</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>brand <span class="token operator">=</span> brand<span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>price <span class="token operator">=</span> price<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token class-name">Phone</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">getVal</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span>brand<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string"> is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span>price<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">&#125;</span>

<span class="token comment">// 子类</span>
<span class="token keyword">function</span> <span class="token function">SmtPhone</span><span class="token punctuation">(</span><span class="token parameter">brand<span class="token punctuation">,</span>price<span class="token punctuation">,</span>color<span class="token punctuation">,</span>size</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token function">Phone</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span>brand<span class="token punctuation">,</span>price<span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// 用this调用Phone的构造</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>color <span class="token operator">=</span> color<span class="token punctuation">;</span>             <span class="token comment">// 独有的</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>size <span class="token operator">=</span> size<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token class-name">SmtPhone</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Phone</span><span class="token punctuation">;</span>    <span class="token comment">// 绑定父级方法</span>
<span class="token class-name">SmtPhone</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>constructor <span class="token operator">=</span> SmtPhone<span class="token punctuation">;</span>

<span class="token class-name">SmtPhone</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">photo</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">return</span> <span class="token string">"a photo"</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> smtphone <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SmtPhone</span><span class="token punctuation">(</span><span class="token string">"A"</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>smtphone<span class="token punctuation">.</span><span class="token function">getVal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>smtphone<span class="token punctuation">.</span><span class="token function">photo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre></p>
<p>ES6类的继承 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">class</span> <span class="token class-name">Phone</span><span class="token punctuation">&#123;</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">brand<span class="token punctuation">,</span>price</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>       <span class="token comment">// 构造函数，名字固定，new的时候执行</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>brand <span class="token operator">=</span> brand<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>price <span class="token operator">=</span> price<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token function">getVal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>                       <span class="token comment">// 成员方法 不能写function/()=>&#123;&#125;</span>
    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span>brand<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string"> is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span>price<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token template-punctuation string">`</span></span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">class</span> <span class="token class-name">SmtPhone</span> <span class="token keyword">extends</span> <span class="token class-name">Phone</span><span class="token punctuation">&#123;</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">brand<span class="token punctuation">,</span>price<span class="token punctuation">,</span>color<span class="token punctuation">,</span>size</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span>brand<span class="token punctuation">,</span>price<span class="token punctuation">)</span><span class="token punctuation">;</span>       <span class="token comment">// 与Java一样调用父类</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color <span class="token operator">=</span> color<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>size <span class="token operator">=</span> size<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token function">photo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token keyword">return</span> <span class="token string">"A Photo"</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> smtphone <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SmtPhone</span><span class="token punctuation">(</span><span class="token string">"Mi"</span><span class="token punctuation">,</span><span class="token number">200</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">12</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>smtphone<span class="token punctuation">.</span><span class="token function">getVal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>smtphone<span class="token punctuation">.</span><span class="token function">photo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre></p>
<p><strong>方法的重写</strong></p>
<p>在js中，我们只能完全重写父类的方法，不能在重写后调用父类的方法</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">class</span> <span class="token class-name">Phone</span><span class="token punctuation">&#123;</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">brand<span class="token punctuation">,</span>price</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>       <span class="token comment">// 构造函数，名字固定，new的时候执行</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>brand <span class="token operator">=</span> brand<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>price <span class="token operator">=</span> price<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token function">getVal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>                       <span class="token comment">// 成员方法 不能写function/()=>&#123;&#125;</span>
    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span>brand<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string"> is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span>price<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token template-punctuation string">`</span></span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">class</span> <span class="token class-name">SmtPhone</span> <span class="token keyword">extends</span> <span class="token class-name">Phone</span><span class="token punctuation">&#123;</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">brand<span class="token punctuation">,</span>price<span class="token punctuation">,</span>color<span class="token punctuation">,</span>size</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span>brand<span class="token punctuation">,</span>price<span class="token punctuation">)</span><span class="token punctuation">;</span>       <span class="token comment">// 与Java一样调用父类</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color <span class="token operator">=</span> color<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>size <span class="token operator">=</span> size<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token function">photo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token keyword">return</span> <span class="token string">"A Photo"</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token function">getVal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>     <span class="token comment">// 重写</span>
    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span>brand<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token string"> smart phone is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span><span class="token keyword">this</span><span class="token punctuation">.</span>price<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token template-punctuation string">`</span></span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> smtphone <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SmtPhone</span><span class="token punctuation">(</span><span class="token string">"Mi"</span><span class="token punctuation">,</span><span class="token number">200</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">12</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>smtphone<span class="token punctuation">.</span><span class="token function">getVal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre>
<p><strong>Get和Set</strong></p>
<p>可以对属性进行方法绑定，当要获取属性的时候执行对应get方法，当要设置属性值时执行对应的set方法,
这些属性不能在构造函数的时候被构造，看起来像一个虚拟变量</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">class</span> <span class="token class-name">GradeList</span><span class="token punctuation">&#123;</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>grade</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>glst <span class="token operator">=</span> grade<span class="token punctuation">;</span>
    <span class="token comment">// 注意这里不能出现sumn,否则没法读取数据，sumn只能从get sumn获取，不过可以写_sumn方便保存</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>_sumn <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>

  <span class="token keyword">get</span> <span class="token function">sumn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>                    <span class="token comment">// 用于对对象的动态属性进行封装</span>
    <span class="token keyword">let</span> tmp <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>                 <span class="token comment">// 注意这里不能用sumn,否则每次for的时候都会跳转到get sumn 直接堆栈溢出</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>glst<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">d<span class="token punctuation">,</span>i</span><span class="token punctuation">)</span><span class="token operator">=></span>tmp<span class="token operator">+=</span>d<span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>_sumn <span class="token operator">=</span> tmp<span class="token punctuation">;</span>            <span class="token comment">// 顺手保存一手，非必要</span>
    <span class="token keyword">return</span> tmp<span class="token punctuation">;</span>                  <span class="token comment">// 适当时候维护了sumn</span>
  <span class="token punctuation">&#125;</span>

  <span class="token keyword">get</span> <span class="token function">avg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>sumn<span class="token operator">/</span><span class="token keyword">this</span><span class="token punctuation">.</span>glst<span class="token punctuation">.</span>length
  <span class="token punctuation">&#125;</span>

  <span class="token keyword">set</span> <span class="token function">sumn</span><span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>                   <span class="token comment">// 必须有一个参数</span>
    <span class="token operator">++</span>d<span class="token punctuation">;</span>                         
    <span class="token keyword">this</span><span class="token punctuation">.</span>_sumn <span class="token operator">=</span> d<span class="token punctuation">;</span>              <span class="token comment">// 进行一些处理，非必要，但是没有的话函数也没什么意义了</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> gst <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">GradeList</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">9</span><span class="token punctuation">)</span>

gst<span class="token punctuation">.</span>sumn <span class="token operator">=</span> <span class="token number">123</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>gst<span class="token punctuation">.</span>_sumn<span class="token punctuation">)</span>    <span class="token comment">// 124</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>gst<span class="token punctuation">.</span>sumn<span class="token punctuation">)</span>     <span class="token comment">// 45</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>gst<span class="token punctuation">.</span>avg<span class="token punctuation">)</span>      <span class="token comment">// 5</span>
gst<span class="token punctuation">.</span>avg <span class="token operator">=</span> <span class="token number">456</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>gst<span class="token punctuation">.</span>avg<span class="token punctuation">)</span>      <span class="token comment">// 5</span></code></pre>
<p>如果设置属性为公有属性,set,get是无效的 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">class</span> <span class="token class-name">GradeList</span> <span class="token punctuation">&#123;</span>
    testVal<span class="token punctuation">;</span>                <span class="token comment">// 尝试注释这行</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>grade</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>glst <span class="token operator">=</span> grade<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>_sumn <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>

    <span class="token keyword">get</span> <span class="token function">testVal</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Im ready to get"</span><span class="token punctuation">)</span>
        <span class="token keyword">return</span> <span class="token number">1</span>
    <span class="token punctuation">&#125;</span>

    <span class="token keyword">set</span> <span class="token function">testVal</span><span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Im ready to set"</span><span class="token punctuation">)</span>
        d<span class="token operator">+=</span><span class="token number">100</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> gst <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">GradeList</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
gst<span class="token punctuation">.</span>testVal<span class="token operator">=</span><span class="token number">100</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>gst<span class="token punctuation">.</span>testVal<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 结果
<pre class="language-none"><code class="language-none">100</code></pre> 注释testVal后 <pre class="language-none"><code class="language-none">Im ready to set
Im ready to get
1</code></pre></p>
<h3 id="数值扩展">数值扩展</h3>
<ul>
<li><p><code>Number.EPSILON</code>
表示最小精度，用于浮点数的比较</p></li>
<li><p><code>0b/0o/0x</code>表示二进制八进制十六进制， o/b/x大小写均可
<pre class="language-js" data-language="js"><code class="language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0b1111</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//15</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0o10</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//8</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0x10</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//16</span></code></pre></p></li>
<li><p><code>Number.isFinite()</code>判断是不是有限
<pre class="language-js" data-language="js"><code class="language-js"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Number<span class="token punctuation">.</span><span class="token function">isFinite</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Number<span class="token punctuation">.</span><span class="token function">isFinite</span><span class="token punctuation">(</span><span class="token number">100</span> <span class="token operator">/</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Number<span class="token punctuation">.</span><span class="token function">isFinite</span><span class="token punctuation">(</span><span class="token number">Infinity</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//false</span></code></pre></p></li>
<li><p><code>Number.isNaN()</code>判断是不是Nan <pre class="language-js" data-language="js"><code class="language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Number<span class="token punctuation">.</span><span class="token function">isNaN</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Number<span class="token punctuation">.</span><span class="token function">isNaN</span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//false</span></code></pre></p></li>
<li><p><code>Number.parseInt()</code>字符串转为Int与<code>Number.parseFloat()</code>字符串转为Float
<pre class="language-js" data-language="js"><code class="language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Number<span class="token punctuation">.</span><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">'5211314love'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//5211314</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Number<span class="token punctuation">.</span><span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">'3.1415926hh'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//3.1415926</span></code></pre></p></li>
<li><p><code>Number.isInteger()</code> 判断一个数是否为整数
<pre class="language-js" data-language="js"><code class="language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Number<span class="token punctuation">.</span><span class="token function">isInteger</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Number<span class="token punctuation">.</span><span class="token function">isInteger</span><span class="token punctuation">(</span><span class="token number">5.5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//false</span></code></pre></p></li>
<li><p><code>Math.trunc()</code>抹掉数字的小数部分
<pre class="language-js" data-language="js"><code class="language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">trunc</span><span class="token punctuation">(</span><span class="token number">3.555</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//3</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">trunc</span><span class="token punctuation">(</span><span class="token number">0.555</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//0</span></code></pre></p></li>
<li><p>Math.sign 判断一个数是正数还是负数还是0,有三个值 +:1， 0:0， -:-1
<pre class="language-js" data-language="js"><code class="language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">sign</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">sign</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// 0</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">sign</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//-1</span></code></pre></p></li>
</ul>
<h3 id="对象方法的扩展">对象方法的扩展</h3>
<ul>
<li><code>Object.is()</code>判断两个值是否相等,
作用与===相似，区别是<code>is(NaN,NaN)</code>有区别 <pre class="language-js" data-language="js"><code class="language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span>               <span class="token comment">// True</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span>               <span class="token comment">// False</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span>           <span class="token comment">// False</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span><span class="token constant">A</span><span class="token operator">:</span><span class="token string">"1"</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token punctuation">&#123;</span><span class="token constant">A</span><span class="token operator">:</span><span class="token string">"1"</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">)</span>   <span class="token comment">// False</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span><span class="token constant">A</span><span class="token operator">:</span><span class="token string">"1"</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token punctuation">&#123;</span><span class="token constant">A</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">)</span>     <span class="token comment">// False</span>
<span class="token comment">// 关于NaN</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">,</span><span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">)</span>           <span class="token comment">// True</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">NaN</span> <span class="token operator">===</span> <span class="token number">NaN</span><span class="token punctuation">)</span>                  <span class="token comment">// False</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token string">"Hi"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                <span class="token comment">// NaN</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token string">"Hi"</span><span class="token punctuation">)</span><span class="token operator">===</span><span class="token number">NaN</span><span class="token punctuation">)</span>           <span class="token comment">// False</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token string">"Hi"</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">)</span>  <span class="token comment">// True</span></code></pre></li>
<li><code>Object.assign()</code>对象合并,可以合并对象,
例如Axios的时候三个配置文件合并可以写成 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> defaultConfig <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  <span class="token string-property property">"url"</span><span class="token operator">:</span> <span class="token string">"127.0.0.1"</span><span class="token punctuation">,</span>
  <span class="token string-property property">"port"</span><span class="token operator">:</span> <span class="token number">9000</span><span class="token punctuation">,</span>
  <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">"GET"</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">let</span> config <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  <span class="token string-property property">"url"</span><span class="token operator">:</span> <span class="token string">"127.9.9.9"</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span>
config <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>defaultConfig<span class="token punctuation">,</span>config<span class="token punctuation">,</span><span class="token punctuation">&#123;</span><span class="token string-property property">"A"</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>config<span class="token punctuation">)</span></code></pre>
后者会覆盖前者</li>
<li><code>Object.setPrototypeOf()</code>/<code>Object.setPrototypeOf()</code>
可以为对象设置原型 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> chd <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  <span class="token literal-property property">pos</span><span class="token operator">:</span> <span class="token string">"child"</span><span class="token punctuation">,</span>
  <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">let</span> prt <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  <span class="token literal-property property">pos</span><span class="token operator">:</span> <span class="token string">"parent"</span><span class="token punctuation">,</span>
  <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span>
<span class="token punctuation">&#125;</span>
<span class="token comment">// 设置chd的原型是prt</span>
Object<span class="token punctuation">.</span><span class="token function">setPrototypeOf</span><span class="token punctuation">(</span>chd<span class="token punctuation">,</span>prt<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>chd<span class="token punctuation">.</span>__proto__<span class="token punctuation">)</span>                <span class="token comment">// prt</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">getPrototypeOf</span><span class="token punctuation">(</span>chd<span class="token punctuation">)</span><span class="token punctuation">)</span>   <span class="token comment">// prt</span></code></pre></li>
</ul>
<h3 id="模块化">模块化</h3>
<p>模块化可以防止命名冲突，直线代码复用，提高维护性</p>
<p>在ES6之前，JS本身没有模块化规范，社区推出的规范有</p>
<ul>
<li>CommonJS规范: 这种规范的代表有NodeJS, Browserify<br />
</li>
<li>AMD规范: 这种规范的代表有requireJS<br />
</li>
<li>CMD规范: 这种规范的代表有SeaJS</li>
</ul>
<p><strong>ES6模块化</strong></p>
<p>由两个命令构成</p>
<ul>
<li><code>export</code>
规定导出接口，与Node不太一样，只是前面加一个标识就可以了</li>
<li><code>import</code> 导入其他模块</li>
</ul>
<p>mod.js文件 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">export</span> <span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">"Hi"</span>
<span class="token keyword">export</span> <span class="token keyword">let</span> <span class="token function-variable function">nowis</span><span class="token operator">=</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre> index.html <pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">              <span class="token comment">// 要写type</span>
  <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> m1 <span class="token keyword">from</span> <span class="token string">"../mod.js"</span>   <span class="token comment">// 导入为m1</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>m1<span class="token punctuation">.</span><span class="token function">nowis</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>          <span class="token comment">// 调用方法</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre></p>
<p><strong>暴露数据的方法</strong></p>
<ul>
<li>分别暴露 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">export</span> <span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">"Hi"</span>
<span class="token keyword">export</span> <span class="token keyword">let</span> <span class="token function-variable function">nowis</span><span class="token operator">=</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre></li>
<li>统一暴露 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">"Hi"</span>
<span class="token keyword">let</span> <span class="token function-variable function">nowis</span><span class="token operator">=</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token punctuation">&#123;</span>name<span class="token punctuation">,</span>nowis<span class="token punctuation">&#125;</span></code></pre></li>
<li>默认暴露 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">export</span> <span class="token keyword">default</span><span class="token punctuation">&#123;</span>
  <span class="token literal-property property">name</span> <span class="token operator">:</span> <span class="token string">"Hi"</span><span class="token punctuation">,</span>
  <span class="token function-variable function">nowis</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span><span class="token keyword">return</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span></code></pre> 默认暴露需要修改html <pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> m1 <span class="token keyword">from</span> <span class="token string">"../mod.js"</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>m1<span class="token punctuation">.</span>default<span class="token punctuation">.</span><span class="token function">nowis</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>    <span class="token comment">// 多个default</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre></li>
</ul>
<p><strong>浏览器引用模块的方法</strong></p>
<ul>
<li>通用引用方法 <pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> m1 <span class="token keyword">from</span> <span class="token string">"../mod.js"</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre></li>
<li>解构的方式引用 <pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">&#123;</span>name<span class="token punctuation">,</span>nowis<span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">"../mod.js"</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
如果两个模块有同名函数，解构后会出现变量名重复的问题，可以使用as进行变量名的替换，不影响解构
<pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">&#123;</span>name<span class="token punctuation">,</span>nowis<span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">"../mod1.js"</span> <span class="token comment">// 有name nowis</span>
  <span class="token keyword">import</span> <span class="token punctuation">&#123;</span>name <span class="token keyword">as</span> name2<span class="token punctuation">,</span>lstis<span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">"../mod2.js"</span> <span class="token comment">// 有name lstis</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre></li>
<li>针对默认暴露的简便模式 <pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> m1 <span class="token keyword">from</span> <span class="token string">"../mod1.js"</span> <span class="token comment">// 因为默认暴露只有一个参数，可以这么做</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre></li>
</ul>
<p><strong>文件统一引用</strong></p>
<p>可以把所有模块引用都放在一起，然后直接引用这个文件</p>
<p>app.js <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> m1 <span class="token keyword">from</span> <span class="token string">"../mod1.js"</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> m2 <span class="token keyword">from</span> <span class="token string">"../mod2.js"</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> m3 <span class="token keyword">from</span> <span class="token string">"../mod3.js"</span></code></pre> index.html <pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./app.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre></p>
<p><strong>将ES6代码转化为ES5代码</strong></p>
<p>在项目中考虑到项目兼容性，需要将项目的JS进行转化，需要的工具有</p>
<ul>
<li>Babel: 将ES6代码转化为ES5代码，但是是CommonJS规范</li>
<li>browserify:
打包工具，把CommonJS规范的JS转化为浏览器可读的，这里是简易打包，项目可能需要webpack</li>
</ul>
<pre class="language-js" data-language="js"><code class="language-js">npm install babel<span class="token operator">-</span>cli babel<span class="token operator">-</span>preset<span class="token operator">-</span>env browserify <span class="token operator">-</span><span class="token constant">D</span>  <span class="token comment">// 软件分别是 命令行 工具 打包工具 -D是开发依赖</span>
npx babel <span class="token punctuation">.</span><span class="token operator">/</span>src <span class="token operator">-</span>d <span class="token punctuation">.</span><span class="token operator">/</span>dist<span class="token operator">/</span>js <span class="token operator">--</span>preset<span class="token operator">=</span>babel<span class="token operator">-</span>preset<span class="token operator">-</span>env  <span class="token comment">// -d前是原js目录 -d后是输出目录 最后是使用预设</span>
npx browserify dist<span class="token operator">/</span>js<span class="token operator">/</span>mod<span class="token punctuation">.</span>js <span class="token operator">-</span>o <span class="token punctuation">.</span><span class="token operator">/</span>bundle<span class="token punctuation">.</span>js          <span class="token comment">// 打包</span></code></pre>
<p>浏览器最后引用<code>./bundle.js</code></p>
<p><strong>将npm包引入浏览器,jQuery为例</strong></p>
<p>bash <pre class="language-js" data-language="js"><code class="language-js">npm install jquery</code></pre> ./src/js/app.js <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">import</span> $ <span class="token keyword">from</span> <span class="token string">"jquery"</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"body"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"background"</span><span class="token punctuation">,</span><span class="token string">"pink"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> bash
<pre class="language-js" data-language="js"><code class="language-js">npx babel <span class="token punctuation">.</span><span class="token operator">/</span>src<span class="token operator">/</span>js <span class="token operator">-</span>d <span class="token punctuation">.</span><span class="token operator">/</span>dist<span class="token operator">/</span>js <span class="token operator">--</span>preset<span class="token operator">=</span>babel<span class="token operator">-</span>preset<span class="token operator">-</span>env
npx browserify <span class="token punctuation">.</span><span class="token operator">/</span>dist<span class="token operator">/</span>js<span class="token operator">/</span>app<span class="token punctuation">.</span>js <span class="token operator">-</span>o <span class="token punctuation">.</span><span class="token operator">/</span>dist<span class="token operator">/</span>bundle<span class="token punctuation">.</span>js</code></pre></p>
<h2 id="es7新特性">ES7新特性</h2>
<h3 id="array的includes">Array的includes</h3>
<p>用来判断元素在不在数组 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> s <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"AA"</span><span class="token punctuation">,</span><span class="token string">"BB"</span><span class="token punctuation">,</span><span class="token string">"CC"</span><span class="token punctuation">,</span><span class="token string">"DD"</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">"BB"</span><span class="token punctuation">)</span><span class="token punctuation">)</span>   <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">"EE"</span><span class="token punctuation">)</span><span class="token punctuation">)</span>   <span class="token comment">// false</span></code></pre></p>
<h3 id="运算符">**运算符</h3>
<p>与python的**一样，用来算指数，Math.pow()功能一样 <pre class="language-none"><code class="language-none">console.log(Math.pow(5,3))    &#x2F;&#x2F; 125
console.log(5**3)             &#x2F;&#x2F; 125</code></pre></p>
<h2 id="es8新特性">ES8新特性</h2>
<h3 id="async-await">async &amp; await</h3>
<p>async/await是一种新的异步函数同步解决方案</p>
<p><strong>async</strong></p>
<ul>
<li>async可以放在函数前，定义async函数，这种函数的返回值是会被转化为Promise</li>
<li>async函数的返回值如果是是非Promise对象，那么会将<code>return val</code>的结果转化为<code>Promise.resolve(val)</code>,
即使val是undefined</li>
<li>async函数中如果抛出异常，那么会返回Promise.reject</li>
<li>async函数如果返回Promise对象，那么会直接返回</li>
<li>不能在全局直接声明async函数，实在不行可以写成 <pre class="language-js" data-language="js"><code class="language-js"><span class="token punctuation">(</span><span class="token keyword">async</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre>
的立即执行函数</li>
</ul>
<p><strong>await</strong> - await必须写在async函数中 -
await右侧的表达式一般是Promise对象，也可以是正常值 -
await的结果是Promise成功的<strong>值</strong>，如果Promise的结果是reject,那么会抛出异常</p>
<p>详见Promise内容</p>
<h3 id="对象方法的扩展-1">对象方法的扩展</h3>
<ul>
<li><code>Object.keys()</code>获取对象所有的<strong>键名</strong>，返回值是数组
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> lower <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  <span class="token string-property property">"A"</span><span class="token operator">:</span><span class="token string">"a"</span><span class="token punctuation">,</span>
  <span class="token string-property property">"B"</span><span class="token operator">:</span><span class="token string">"b"</span><span class="token punctuation">,</span>
  <span class="token string-property property">"C"</span><span class="token operator">:</span><span class="token string">"c"</span><span class="token punctuation">,</span>
  <span class="token string-property property">"D"</span><span class="token operator">:</span><span class="token string">"d"</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span>

Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>lower<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">d</span><span class="token operator">=></span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">)</span>  <span class="token comment">// A B C D</span></code></pre></li>
<li><code>Object.values()</code>获取对象所有的<strong>值</strong>，返回值是数组
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> lower <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  <span class="token string-property property">"A"</span><span class="token operator">:</span><span class="token string">"a"</span><span class="token punctuation">,</span>
  <span class="token string-property property">"B"</span><span class="token operator">:</span><span class="token string">"b"</span><span class="token punctuation">,</span>
  <span class="token string-property property">"C"</span><span class="token operator">:</span><span class="token string">"c"</span><span class="token punctuation">,</span>
  <span class="token string-property property">"D"</span><span class="token operator">:</span><span class="token string">"d"</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">values</span><span class="token punctuation">(</span>lower<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token comment">// [ 'a', 'b', 'c', 'd' ]</span></code></pre></li>
<li><code>Object.entries()</code>获取对象所有的<strong>键值对</strong>，返回值是数组，元素是一个数组，包含键和值,
可以用来构造Map <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> lower <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  <span class="token string-property property">"A"</span><span class="token operator">:</span><span class="token string">"a"</span><span class="token punctuation">,</span>
  <span class="token string-property property">"B"</span><span class="token operator">:</span><span class="token string">"b"</span><span class="token punctuation">,</span>
  <span class="token string-property property">"C"</span><span class="token operator">:</span><span class="token string">"c"</span><span class="token punctuation">,</span>
  <span class="token string-property property">"D"</span><span class="token operator">:</span><span class="token string">"d"</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>lower<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token comment">// [ [ 'A', 'a' ], [ 'B', 'b' ], [ 'C', 'c' ], [ 'D', 'd' ] ]</span>
<span class="token keyword">let</span> m <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>lower<span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span>
<span class="token comment">// Map(4) &#123; 'A' => 'a', 'B' => 'b', 'C' => 'c', 'D' => 'd' &#125;</span></code></pre></li>
<li><code>Object.getOwnPropertyDescriptors()</code>获取对象属性的描述对象，这个对象的每一个属性都对应描述中的一个对象，包括值，可写，可删除，可枚举，方便我们进行深层次的对象克隆
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> lower <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
    <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"a"</span><span class="token punctuation">,</span>
    <span class="token string-property property">"age"</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
    <span class="token string-property property">"sex"</span><span class="token operator">:</span> <span class="token string">"F"</span><span class="token punctuation">,</span>
    <span class="token string-property property">"note"</span><span class="token operator">:</span> <span class="token string">"good"</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">getOwnPropertyDescriptors</span><span class="token punctuation">(</span>lower<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token comment">/**
&#123;
    name: &#123; value: 'a', writable: true, enumerable: true, configurable: true &#125;,
    age: &#123; value: 12, writable: true, enumerable: true, configurable: true &#125;,
    sex: &#123; value: 'F', writable: true, enumerable: true, configurable: true &#125;,
    note: &#123;
        value: 'good',
        writable: true,
        enumerable: true,
        configurable: true
    &#125;
&#125;
*/</span></code></pre></li>
</ul>
<h2 id="es9新特性">ES9新特性</h2>
<h3 id="rest参数与spread扩展">REST参数与Spread扩展</h3>
<p>在ES6中只有对数组的REST/Spread, 在ES9中支持对对象进行REST/Spread</p>
<p><strong>REST</strong></p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">cnnt</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">&#123;</span>host<span class="token punctuation">,</span>port<span class="token punctuation">,</span><span class="token operator">...</span>args<span class="token punctuation">&#125;</span></span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>host<span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>port<span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>args<span class="token punctuation">)</span><span class="token punctuation">;</span>          <span class="token comment">// 对象的rest就是一个对象</span>
<span class="token punctuation">&#125;</span>

<span class="token function">cnnt</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
    <span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">"127.0.0.1"</span><span class="token punctuation">,</span>
    <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span>
    <span class="token literal-property property">pwd</span><span class="token operator">:</span> <span class="token number">123</span><span class="token punctuation">,</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"A"</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
<span class="token comment">// 127.0.0.1</span>
<span class="token comment">// 80</span>
<span class="token comment">// &#123; pwd: 123, type: 'A' &#125;</span></code></pre>
<p><strong>Spread</strong> <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> Obj1<span class="token operator">=</span><span class="token punctuation">&#123;</span>
    <span class="token string-property property">"name"</span><span class="token operator">:</span><span class="token string">"Liu"</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> Obj2<span class="token operator">=</span><span class="token punctuation">&#123;</span>
    <span class="token string-property property">"Sex"</span><span class="token operator">:</span><span class="token string">"M"</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> Obj3<span class="token operator">=</span><span class="token punctuation">&#123;</span>
    <span class="token string-property property">"Age"</span><span class="token operator">:</span><span class="token number">20</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token punctuation">&#123;</span><span class="token operator">...</span>Obj1<span class="token punctuation">,</span><span class="token operator">...</span>Obj2<span class="token punctuation">,</span><span class="token operator">...</span>Obj3<span class="token punctuation">&#125;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
<span class="token comment">// &#123; name: 'Liu', Sex: 'M', Age: 20 &#125;</span></code></pre></p>
<h3 id="正则扩展">正则扩展</h3>
<p><strong>命名捕获分组</strong></p>
<p>我们可以对政策匹配到的分组<code>$1,$2...</code>赋名，方面我们的使用</p>
<p>在之前 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">'&lt;iframe class="notranslate">Inner&lt;/iframe>'</span><span class="token punctuation">;</span>
<span class="token comment">// 想要获取class和标签内容要写两个()用来分组</span>
<span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">class="(.*)\".*>(.*)&lt;\/iframe</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>
<span class="token keyword">let</span> res <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 结果是 <pre class="language-js" data-language="js"><code class="language-js"><span class="token punctuation">[</span>
  <span class="token string">'class="notranslate">Inner&lt;/iframe'</span><span class="token punctuation">,</span>
  <span class="token string">'notranslate'</span><span class="token punctuation">,</span>
  <span class="token string">'Inner'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">index</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
  <span class="token literal-property property">input</span><span class="token operator">:</span> <span class="token string">'&lt;iframe class="notranslate">Inner&lt;/iframe>'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">groups</span><span class="token operator">:</span> <span class="token keyword">undefined</span>       <span class="token comment">// 这里是undefined</span>
<span class="token punctuation">]</span></code></pre>
也就是res[0]是匹配结构,res[1]是第一个分组,res[2]是第二个分组</p>
<p>将需要赋值的分组括号由<code>(条件)</code>改为<code>(?&lt;变量名&gt;条件)</code>,使用捕获分组会存储着groups中</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">'&lt;iframe class="notranslate">Inner&lt;/iframe>'</span><span class="token punctuation">;</span>
<span class="token comment">// 想要获取class和标签内容要写两个()用来分组</span>
<span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">class="(?&lt;cls>.*)\".*>(?&lt;Inn>.*)&lt;\/iframe</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>
<span class="token keyword">let</span> res <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>groups<span class="token punctuation">.</span>cls<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>groups<span class="token punctuation">.</span>Inn<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>结果是 <pre class="language-js" data-language="js"><code class="language-js"><span class="token punctuation">[</span>
  <span class="token string">'class="notranslate">Inner&lt;/iframe'</span><span class="token punctuation">,</span>      <span class="token comment">// [0-2]都没有变</span>
  <span class="token string">'notranslate'</span><span class="token punctuation">,</span>
  <span class="token string">'Inner'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">index</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
  <span class="token literal-property property">input</span><span class="token operator">:</span> <span class="token string">'&lt;iframe class="notranslate">Inner&lt;/iframe>'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">groups</span><span class="token operator">:</span> <span class="token punctuation">[</span>Object<span class="token operator">:</span> <span class="token keyword">null</span> prototype<span class="token punctuation">]</span> <span class="token punctuation">&#123;</span> <span class="token literal-property property">cls</span><span class="token operator">:</span> <span class="token string">'notranslate'</span><span class="token punctuation">,</span> <span class="token literal-property property">Inn</span><span class="token operator">:</span> <span class="token string">'Inner'</span> <span class="token punctuation">&#125;</span>
  <span class="token comment">// groups变了</span>
<span class="token punctuation">]</span>
notranslate       <span class="token comment">// 可以直接输出了</span>
Inner</code></pre>
就可以直接使用对应变量了,在修改正则的时候也不用修改下标了</p>
<p><strong>反向断言</strong></p>
<p>正向断言是匹配某个串要求不仅要满足串的条件,原串后面的内容也要满足指定条件,例如:
对于子复查u年'aaa111bbb222'我想要最后一个连续的字母,那么应该匹配的是<code>[a-zA-Z]+</code>并且后面是<code>2</code>实现方法是<strong>在正则条件后加上(?=后面的内容)</strong>,这里要匹配的内容不用分组,因为我们这个方法就是要一次性匹配到结果
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">'aaa111bbb222'</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[a-zA-Z]+(?=2)</span><span class="token regex-delimiter">/</span></span>
<span class="token keyword">let</span> res <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
<span class="token comment">// [ 'bbb', index: 6, input: 'aaa111bbb222', groups: undefined ]</span></code></pre></p>
<p>反向断言是要匹配一个串,满足串前面的内容是指定条件.实现方法是<strong>(?&lt;=前面的内容)条件</strong>,例如我想匹配第一个出现的数字串
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">'aaa111bbb222'</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">(?&lt;=a)[0-9]+</span><span class="token regex-delimiter">/</span></span>
<span class="token keyword">let</span> res <span class="token operator">=</span> reg<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
<span class="token comment">// [ '111', index: 3, input: 'aaa111bbb222', groups: undefined ]</span></code></pre></p>
<p><strong>dotAll模式</strong></p>
<p>在正则中<code>.</code>代表任意除<code>\n</code>外的任意内容,在提取有<code>\n</code>的内容的时候就显得不方便,只需要设置<code>/条件/s</code>即可,就是在最后加入s属性</p>
<p><code>.*</code>用来匹配任意字符串的时候经常出现贪婪匹配,可以设置<code>.*?</code>禁止贪婪</p>
<h2 id="es10新特性">ES10新特性</h2>
<h3 id="object.fromentries方法">Object.fromEntries方法</h3>
<ul>
<li><code>Object.entries()</code>可以获取对象所有的<strong>键值对</strong>，返回值是数组，元素是一个数组，包含键和值,
可以用来构造Map</li>
<li><code>Object.fromEntries()</code>可以将一个Map/二维数组转化为对象的形式</li>
</ul>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> ary <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span><span class="token string">'a'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span><span class="token string">'B'</span><span class="token punctuation">,</span><span class="token string">'b'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span><span class="token string">'C'</span><span class="token punctuation">,</span><span class="token string">'c'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span><span class="token string">'D'</span><span class="token punctuation">,</span><span class="token string">'d'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> res <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">fromEntries</span><span class="token punctuation">(</span>ary<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
<span class="token comment">// &#123; A: 'a', B: 'b', C: 'c', D: 'd' &#125;</span></code></pre>
<h3 id="trimstarttrimend方法">trimStart/trimEnd方法</h3>
<p>在ES5中字符串有trim方法用来清除字符串两边的空白,
现在有start/end指定清除哪一边了空白 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> s <span class="token operator">=</span> <span class="token string">'   abc     '</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>s<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">)</span>   <span class="token comment">//abc 3</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">.</span><span class="token function">trimStart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>s<span class="token punctuation">.</span><span class="token function">trimStart</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">)</span>   <span class="token comment">//abc      8</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">.</span><span class="token function">trimEnd</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>s<span class="token punctuation">.</span><span class="token function">trimEnd</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">)</span>   <span class="token comment">//   abc 6</span></code></pre></p>
<h3 id="array.flatflatmap方法">Array.flat/flatMap方法</h3>
<p>flat译为平面,也就是可以将数组内部数组的元素维度降低,例如
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr1<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>         <span class="token comment">// [ 1, 2, 3, 4 ]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr2<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>         <span class="token comment">// [ 1, 2, 3, 4, [ 5, 6 ] ]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr2<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// [ 1, 2, 3, 4, 5, 6 ]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr2<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token comment">// [ 1, 2, 3, 4, 5, 6 ] 可以在括号中指定深度,默认1</span></code></pre>
flatMap可以将map的结果进行降维,这里的map和Map不同,类似于python的map做批量操作
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> res1 <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token operator">*</span><span class="token number">10</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res1<span class="token punctuation">)</span>
<span class="token comment">// [ 10, 20, 30, 40 ]</span>
<span class="token keyword">let</span> res2 <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">[</span>item<span class="token operator">*</span><span class="token number">10</span><span class="token punctuation">,</span>item<span class="token operator">*</span><span class="token number">10</span><span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res2<span class="token punctuation">)</span>
<span class="token comment">// [ [ 10, 11 ], [ 20, 21 ], [ 30, 31 ], [ 40, 41 ] ]</span>
<span class="token keyword">let</span> res3 <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">flatMap</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">[</span>item<span class="token operator">*</span><span class="token number">10</span><span class="token punctuation">,</span>item<span class="token operator">*</span><span class="token number">10</span><span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res3<span class="token punctuation">)</span>
<span class="token comment">// [ 10, 11, 20, 21, 30, 31, 40, 41 ]</span></code></pre></p>
<h3 id="symbol.description方法">Symbol.description方法</h3>
<p>可以用<code>Symbol.description</code>方法获取Symbol的注释
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> s <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">"我是一个注释"</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>s<span class="token punctuation">.</span>description<span class="token punctuation">)</span>  <span class="token comment">// 我是一个注释</span></code></pre></p>
<h2 id="es11新特性">ES11新特性</h2>
<h3 id="私有属性">私有属性</h3>
<p>在传统OOP语言中的对象可以是私有的,ES11引入了这个特性,
定义私有属性只要在前面加入<code>#</code>就可以了 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">class</span> <span class="token class-name">Psn</span><span class="token punctuation">&#123;</span>
    name<span class="token punctuation">;</span>       <span class="token comment">// 公有的</span>
    #age<span class="token punctuation">;</span>       <span class="token comment">// 私有的</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span>age</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>#age <span class="token operator">=</span> age<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
    <span class="token function">getIt</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        <span class="token keyword">return</span> <span class="token punctuation">&#123;</span><span class="token string-property property">"N"</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">,</span><span class="token string-property property">"A"</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>#age<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> psn <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Psn</span><span class="token punctuation">(</span><span class="token string">"Liu"</span><span class="token punctuation">,</span><span class="token number">12</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>psn<span class="token punctuation">.</span><span class="token function">getIt</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// &#123; N: 'Liu', A: 12 &#125;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>psn<span class="token punctuation">.</span>name<span class="token punctuation">)</span>      <span class="token comment">// Liu</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>psn<span class="token punctuation">.</span>#age<span class="token punctuation">)</span>      <span class="token comment">// Error</span></code></pre></p>
<h3 id="promise.allsettled方法">Promise.allSettled方法</h3>
<p>可以指定一个变量为<code>Promise.allSettled()</code>,
他会运行一系列Promise,当全部运行结束后,不论他包含的Promise的结果是什么,状态都变为resolved,并保存每个Promise的结果
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> p1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res<span class="token punctuation">,</span>rej</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"OK"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">res</span><span class="token punctuation">(</span><span class="token string">"Im P1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span>

<span class="token keyword">let</span> p2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res<span class="token punctuation">,</span>rej</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"NK"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">rej</span><span class="token punctuation">(</span><span class="token string">"Im P2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span>

<span class="token keyword">let</span> p3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res<span class="token punctuation">,</span>rej</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"OK"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">res</span><span class="token punctuation">(</span><span class="token string">"Im P3"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span>

<span class="token keyword">let</span> result <span class="token operator">=</span> Promise<span class="token punctuation">.</span><span class="token function">allSettled</span><span class="token punctuation">(</span><span class="token punctuation">[</span>p1<span class="token punctuation">,</span>p2<span class="token punctuation">,</span>p3<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token number">5000</span><span class="token punctuation">)</span>            <span class="token comment">// 延时显示等待Promise结束</span></code></pre> 结果是 <pre class="language-js" data-language="js"><code class="language-js">Promise <span class="token punctuation">&#123;</span> <span class="token operator">&lt;</span>pending<span class="token operator">></span> <span class="token punctuation">&#125;</span>
<span class="token constant">OK</span>
<span class="token constant">NK</span>
<span class="token constant">OK</span>
Promise <span class="token punctuation">&#123;</span>
  <span class="token punctuation">[</span>
    <span class="token punctuation">&#123;</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">'fulfilled'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'Im P1'</span> <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
    <span class="token punctuation">&#123;</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">'rejected'</span><span class="token punctuation">,</span> <span class="token literal-property property">reason</span><span class="token operator">:</span> <span class="token string">'Im P2'</span> <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
    <span class="token punctuation">&#123;</span> <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token string">'fulfilled'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'Im P3'</span> <span class="token punctuation">&#125;</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">&#125;</span></code></pre></p>
<p>与他很像的是<code>Promise.all()</code>方法,他的结果是所有结果取<code>AND</code>,他们都用来做批量异步任务,
all一般是用来做前一个成功后一个运行,allSettled一般是要全部运行,
之间没有关联, 要求保存结果</p>
<h3 id="string.matchall方法">String.matchAll方法</h3>
<p>如果正则表达式有/g标志，那么多次调用.exec()就会得到所有匹配的结果。如果没有匹配的结果，.exec()就会返回null。在这之前会返回每个匹配的匹配对象。这个对象包含捕获的子字符串和更多信息.如果正则表达式没有/g标志，.exec()总是返回第一次匹配的结果。</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> matchIterator <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">matchAll</span><span class="token punctuation">(</span>regExp<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>给定一个字符串和一个正则表达式，.matchAll（）为所有匹配的匹配对象返回一个迭代器。也可以使用一个扩展运算符...把迭代器转换为数组。</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token punctuation">[</span><span class="token operator">...</span><span class="token string">'-a-a-a'</span><span class="token punctuation">.</span><span class="token function">matchAll</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">-(a)</span><span class="token regex-delimiter">/</span><span class="token regex-flags">ug</span></span><span class="token punctuation">)</span><span class="token punctuation">]</span>
<span class="token comment">//[ [ '-a', 'a' ], [ '-a', 'a' ], [ '-a', 'a' ] ]</span></code></pre>
<p>现在是否设置/g，都不会有问题了。 <pre class="language-js" data-language="js"><code class="language-js"><span class="token punctuation">[</span><span class="token operator">...</span><span class="token string">'-a-a-a'</span><span class="token punctuation">.</span><span class="token function">matchAll</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">-(a)</span><span class="token regex-delimiter">/</span><span class="token regex-flags">u</span></span><span class="token punctuation">)</span><span class="token punctuation">]</span>
<span class="token comment">// [ [ '-a', 'a' ], [ '-a', 'a' ], [ '-a', 'a' ] ]</span></code></pre></p>
<h3 id="可选链操作符号">可选链操作符号</h3>
<p>在以前我们想访问一个对象很深的属性要进行多次尝试防止出现访问<code>undefined.XXX</code>,例如
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> d <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token punctuation">&#123;</span>
    <span class="token literal-property property">fname</span><span class="token operator">:</span><span class="token punctuation">&#123;</span>
      <span class="token literal-property property">pub</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"Liu"</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">lname</span><span class="token operator">:</span><span class="token punctuation">&#123;</span>
      <span class="token literal-property property">pub</span> <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> fnm <span class="token operator">=</span> d<span class="token punctuation">.</span>name<span class="token operator">&amp;&amp;</span>d<span class="token punctuation">.</span>name<span class="token punctuation">.</span>fname<span class="token operator">&amp;&amp;</span>d<span class="token punctuation">.</span>name<span class="token punctuation">.</span>fname<span class="token punctuation">.</span>value    <span class="token comment">// 要一直尝试</span>
<span class="token keyword">let</span> lnm <span class="token operator">=</span> d<span class="token punctuation">.</span>name<span class="token operator">&amp;&amp;</span>d<span class="token punctuation">.</span>name<span class="token punctuation">.</span>lname<span class="token operator">&amp;&amp;</span>d<span class="token punctuation">.</span>name<span class="token punctuation">.</span>lname<span class="token punctuation">.</span>value    <span class="token comment">// 要一直尝试</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>fnm<span class="token punctuation">,</span>lnm<span class="token punctuation">)</span>    <span class="token comment">// Liu undefined</span></code></pre></p>
<p>可选链的操作符是<code>?.</code>,例如<code>A?.B</code>就是A存在才去读取B,例如
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> d <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token punctuation">&#123;</span>
    <span class="token literal-property property">fname</span><span class="token operator">:</span><span class="token punctuation">&#123;</span>
      <span class="token literal-property property">pub</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"Liu"</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">lname</span><span class="token operator">:</span><span class="token punctuation">&#123;</span>
      <span class="token literal-property property">pub</span> <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">let</span> fnm <span class="token operator">=</span> d<span class="token operator">?.</span>name<span class="token operator">?.</span>fname<span class="token operator">?.</span>value
<span class="token keyword">let</span> lnm <span class="token operator">=</span> d<span class="token operator">?.</span>name<span class="token operator">?.</span>lname<span class="token operator">?.</span>value
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>fnm<span class="token punctuation">,</span>lnm<span class="token punctuation">)</span>    <span class="token comment">// Liu undefined</span></code></pre></p>
<h3 id="动态import">动态Import</h3>
<p>动态导入支持按需加载模块/懒加载,而不是一股脑的在开头加载,语法是<code>import("path")</code>,返回的是一个Promise对象,当正确加载就resolve,
resolve的值是模块暴露的对象</p>
<ul>
<li>静态导入 <pre class="language-js" data-language="js"><code class="language-js"><span class="token comment">// 文件头</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> md1 <span class="token keyword">from</span> <span class="token string">"./demo.js"</span></code></pre></li>
<li>动态导入 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">if</span><span class="token punctuation">(</span>something<span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">"./demo.js"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
    d<span class="token punctuation">.</span><span class="token function">xx</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// d就是暴露的对象</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span></code></pre></li>
</ul>
<h3 id="bigint类型">BigInt类型</h3>
<p>比int类范围大,用于大数运算 - 字面值写法: <code>123n</code> -
Int转BigInt:<code>BigInt(123)</code> -
BigInt不能和int进行运算,必须把int转为BigInt,例如 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">123n</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>              <span class="token comment">// 123n</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token operator">+</span><span class="token number">10</span><span class="token punctuation">)</span>           <span class="token comment">// Error</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token operator">+</span><span class="token function">BigInt</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">)</span>   <span class="token comment">// 133n</span></code></pre> ###
绝对全局对象</p>
<p>浏览器的全局对象是window, 但是NodeJS等没有window,
在新的NodeJS/浏览器中都可以使用<code>golbalThis</code>指向全局对象,
使得在浏览器/NodeJS中编程得到了一个统一</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token comment">// @Node</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>globalThis<span class="token punctuation">)</span>
<span class="token comment">// &lt;ref *1> Object [global] &#123;</span>
<span class="token comment">//   global: [Circular *1],</span>
<span class="token comment">//   clearInterval: [Function: clearInterval],</span>
<span class="token comment">//   clearTimeout: [Function: clearTimeout],</span>
<span class="token comment">//   setInterval: [Function: setInterval],</span>
<span class="token comment">//   setTimeout: [Function: setTimeout] &#123;</span>
<span class="token comment">//     [Symbol(nodejs.util.promisify.custom)]: [Getter]</span>
<span class="token comment">//   &#125;,</span>
<span class="token comment">//   queueMicrotask: [Function: queueMicrotask],</span>
<span class="token comment">//   performance: [Getter/Setter],</span>
<span class="token comment">//   clearImmediate: [Function: clearImmediate],</span>
<span class="token comment">//   setImmediate: [Function: setImmediate] &#123;</span>
<span class="token comment">//     [Symbol(nodejs.util.promisify.custom)]: [Getter]</span>
<span class="token comment">//   &#125;</span>
<span class="token comment">// &#125;</span>

<span class="token comment">// @Chrome</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>globalThis<span class="token punctuation">)</span>
<span class="token comment">// Window &#123;0: Window, 1: Window, window: Window, self: Window, document: document, name: "", location: Location, …&#125;</span></code></pre>
<h2 id="es12新特性">ES12新特性</h2>
<p>转载自: <a
target="_blank" rel="noopener" href="https://blog.csdn.net/qq_37393635/article/details/109461000">前端虾米公社</a></p>
<h3 id="replaceall">replaceAll</h3>
<p>看到replaceAll这个词，相比很容易联想到replace。在JavaScript中，replace方法只能是替换字符串中匹配到的第一个实例字符，而不能进行全局多项匹配替换，唯一的办法是通过正则表达式进行相关规则匹配替换</p>
<p>而replaceAll则是返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉，替换规则可以是字符串或者正则表达式。</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> string <span class="token operator">=</span> <span class="token string">'I like 前端,I like 前端公虾米'</span>
<span class="token comment">//使用replace</span>
<span class="token keyword">let</span> replaceStr <span class="token operator">=</span> string<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">'like'</span><span class="token punctuation">,</span><span class="token string">'love'</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>replaceStr<span class="token punctuation">)</span>  <span class="token comment">// 'I love 前端,I like前端公虾米'</span>
<span class="token comment">//replace使用正则匹配所有</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>string<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">like</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span><span class="token string">'love'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 'I love 前端,I love 前端公虾米'</span>
<span class="token comment">//使用replaceAll</span>
<span class="token keyword">let</span> replaceAllStr <span class="token operator">=</span> string<span class="token punctuation">.</span><span class="token function">replaceAll</span><span class="token punctuation">(</span><span class="token string">'like'</span><span class="token punctuation">,</span><span class="token string">'love'</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>replaceAllStr<span class="token punctuation">)</span> <span class="token comment">// 'I love 前端,I love 前端公虾米'</span></code></pre>
<p>需要注意的是，replaceAll在使用正则表达式的时候，如果非全局匹配（/g），则replaceAll()会抛出一个异常
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> string <span class="token operator">=</span> <span class="token string">'I like 前端,I like 前端公虾米'</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>string<span class="token punctuation">.</span><span class="token function">replaceAll</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">like</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span><span class="token string">'love'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//TypeError</span></code></pre></p>
<h3 id="promise.any">Promise.any</h3>
<p>当Promise列表中的任意一个promise成功resolve则返回第一个resolve的结果状态</p>
<p>如果所有的promise均reject，则抛出异常表示所有请求失败</p>
<pre class="language-js" data-language="js"><code class="language-js">Promise<span class="token punctuation">.</span><span class="token function">any</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
  <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setTimeout</span><span class="token punctuation">(</span>reject<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">,</span> <span class="token string">'哎呀，我被拒绝了'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setTimeout</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">,</span> <span class="token string">'哎呀，她接受我了'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setTimeout</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">,</span> <span class="token string">'哎呀，她也接受我了'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">输出结果: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>value<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">catch</span> <span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">)</span>

<span class="token comment">//输出</span>
<span class="token comment">//输出结果:哎呀，她接受我了</span></code></pre>
<p>再来看下另一种情况 <pre class="language-js" data-language="js"><code class="language-js">Promise<span class="token punctuation">.</span><span class="token function">any</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
  Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">'Error 1'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">'Error 2'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">'Error 3'</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">请求结果: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$&#123;</span>value<span class="token interpolation-punctuation punctuation">&#125;</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">catch</span> <span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">)</span>

<span class="token comment">//输出</span>
<span class="token literal-property property">AggregateError</span><span class="token operator">:</span> All promises were rejected</code></pre>
Promise.any与Promise.race十分容易混淆，务必注意区分，Promise.race
一旦某个promise触发了resolve或者reject，就直接返回了该状态结果，并不在乎其成功或者失败</p>
<h3 id="weakrefs">WeakRefs</h3>
<p>使用WeakRefs的Class类创建对对象的弱引用(对对象的弱引用是指当该对象应该被GC回收时不会阻止GC的回收行为)</p>
<p>当我们通过（const、let、var）创建一个变量时，垃圾收集器GC将永远不会从内存中删除该变量，只要它的引用仍然存在可访问。WeakRef对象包含对对象的弱引用。对对象的弱引用是不会阻止垃圾收集器GC恢复该对象的引用，则GC可以在任何时候删除它。</p>
<p>WeakRefs在很多情况下都很有用，比如使用Map对象来实现具有很多需要大量内存的键值缓存，在这种情况下最方便的就是尽快释放键值对占用的内存。</p>
<p>目前，可以通过WeakMap()或者WeakSet()来使用WeakRefs</p>
<p>举个栗子</p>
<p>我想要跟踪特定的对象调用某一特定方法的次数，超过1000条则做对应提示</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">function</span> <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
	<span class="token operator">...</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">function</span> <span class="token function">useObject</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
	<span class="token function">doSomething</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>
  
  <span class="token keyword">let</span> called <span class="token operator">=</span> map<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token number">0</span>
  called <span class="token operator">++</span> 
  
  <span class="token keyword">if</span><span class="token punctuation">(</span>called<span class="token operator">></span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'当前调用次数已经超过1000次了，over'</span><span class="token punctuation">)</span>
  <span class="token punctuation">&#125;</span>
  
  map<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> called<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span></code></pre>
<p>如上虽然可以实现我们的功能，但是会发生内存溢出,因为传递给doSomething函数的每个对象都永久保存在map中，并且不会被GC回收，因此我们可以使用WeakMap
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> wmap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WeakMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">function</span> <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
	<span class="token operator">...</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">function</span> <span class="token function">useObject</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
	<span class="token function">doSomething</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>
  
  <span class="token keyword">let</span> called <span class="token operator">=</span> wmap<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token number">0</span>
  
  called <span class="token operator">++</span>
  
  <span class="token keyword">if</span><span class="token punctuation">(</span>called<span class="token operator">></span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'当前调用次数已经超过1000次了，over'</span><span class="token punctuation">)</span>
  <span class="token punctuation">&#125;</span>
  
  wmap<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> called<span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span></code></pre>
因为是弱引用，所以WeakMap、WeakSet的键值对是不可枚举的</p>
<p>WeakSet和WeakMap相似，但是每个对象在WeakSet中的每个对象只可能出现一次，WeakSet中所有对象都是唯一的
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> ws <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WeakSet</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">let</span> foo <span class="token operator">=</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>
<span class="token keyword">let</span> bar <span class="token operator">=</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span>

ws<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span>
ws<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>bar<span class="token punctuation">)</span>

ws<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span> <span class="token comment">//true</span>
ws<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>bar<span class="token punctuation">)</span> <span class="token comment">//true</span>

ws<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span> <span class="token comment">//删除foo对象</span>
ws<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span> <span class="token comment">//false 已删除</span>
ws<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>bar<span class="token punctuation">)</span> <span class="token comment">//仍存在</span></code></pre> WeakSet与Set相比有以下两个区别</p>
<p>WeakSet只能是对象集合，而不能是任何类型的任意值
WeakSet弱引用，集合中对象引用为弱引用，如果没有其他对WeakSet对象的引用，则会被GC回收
最后，WeakRef实例有一个方法deref，返回引用的原始对象，如果原始对象被回收，则返回undefined
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> cache <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">setValue</span> <span class="token operator">=</span>  <span class="token punctuation">(</span><span class="token parameter">key<span class="token punctuation">,</span> obj</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
  cache<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">WeakRef</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">getValue</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">const</span> ref <span class="token operator">=</span> cache<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>ref<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">return</span> ref<span class="token punctuation">.</span><span class="token function">deref</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">fibonacciCached</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">number</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">const</span> cached <span class="token operator">=</span> <span class="token function">getValue</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>cached<span class="token punctuation">)</span> <span class="token keyword">return</span> cached<span class="token punctuation">;</span>
  <span class="token keyword">const</span> sum <span class="token operator">=</span> <span class="token function">calculateFibonacci</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token function">setValue</span><span class="token punctuation">(</span>number<span class="token punctuation">,</span> sum<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> sum<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span></code></pre></p>
<p>对于缓存远程数据来说，这可能不是一个好主意，因为远程数据可能会不可预测地从内存中删除。在这种情况下，最好使用LRU之类的缓存。</p>
<h3 id="逻辑运算符和赋值表达式">逻辑运算符和赋值表达式</h3>
<p>逻辑运算符和赋值表达式，新特性结合了逻辑运算符（&amp;&amp;，||，??）和赋值表达式而JavaScript已存在的
复合赋值运算符有：</p>
<p>操作运算符：+= -= *= /= %= **= 位操作运算符：&amp;= ^= |=
按位运算符：&lt;&lt;= &gt;&gt;= &gt;&gt;&gt;=
现有的的运算符，其工作方式都可以如此来理解</p>
<p>表达式：<code>a op= b</code> 等同于：<code>a = a op b</code></p>
<p>逻辑运算符和其他的复合赋值运算符工作方式不同</p>
<p>表达式：<code>a op= b</code>
等同于：<code>a = a op (a = b)</code></p>
<ul>
<li><code>a ||= b</code> 等价于 <code>a = a || (a = b)</code></li>
<li><code>a &amp;&amp;= b</code> 等价于
<code>a = a &amp;&amp; (a = b)</code></li>
<li><code>a ??= b</code> 等价于 <code>a = a ?? (a = b)</code></li>
</ul>
<p>为什么不再是跟以前的运算公式<code>a = a op b</code>一样呢，而是采用<code>a = a op (a = b)</code>。因为后者当且仅当a的值为false的时候才计算赋值，只有在必要的时候才执行分配，而前者的表达式总是执行赋值操作</p>
<ul>
<li><code>??=</code>可用来补充/初始化缺失的属性</li>
</ul>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> pages <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">&#123;</span>
  	<span class="token literal-property property">title</span><span class="token operator">:</span><span class="token string">'主会场'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">'/'</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
  <span class="token punctuation">&#123;</span>
    <span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">'/other'</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
  <span class="token operator">...</span>
<span class="token punctuation">]</span>
  
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> page <span class="token keyword">of</span> pages<span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
	page<span class="token punctuation">.</span>title <span class="token operator">??=</span> <span class="token string">'默认标题'</span>
<span class="token punctuation">&#125;</span>
console<span class="token punctuation">.</span><span class="token function">table</span><span class="token punctuation">(</span>pages<span class="token punctuation">)</span>
<span class="token comment">//(index)  title       		path</span>
<span class="token comment">//0        "主会场"   	  "/"</span>
<span class="token comment">//1        "默认标题"  	 "/other"</span></code></pre>
<p>小结： - <code>&amp;&amp;=</code>: 当LHS值存在时，将RHS变量赋值给LHS
- <code>||=</code>: 当LHS值不存在时，将RHS变量赋值给LHS -
<code>??=</code>: 当LHS值为null或者undefined时，将RHS变量赋值给LHS</p>
<h3 id="数字分隔符">数字分隔符</h3>
<p>数字分隔符，可以在数字之间创建可视化分隔符，通过_下划线来分割数字，使数字更具可读性
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> money <span class="token operator">=</span> <span class="token number">1_000_000_000</span>
<span class="token comment">//等价于</span>
<span class="token keyword">const</span> money <span class="token operator">=</span> <span class="token number">1000000000</span>

<span class="token keyword">const</span> totalFee <span class="token operator">=</span> <span class="token number">1000.12_34</span>
<span class="token comment">//等价于</span>
<span class="token keyword">const</span> totalFee <span class="token operator">=</span> <span class="token number">1000.1234</span></code></pre> 该新特性同样支持在八进制数中使用 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> number <span class="token operator">=</span> <span class="token number">0o123_456</span>
<span class="token comment">//等价于</span>
<span class="token keyword">const</span> number <span class="token operator">=</span> <span class="token number">0o123456</span></code></pre></p>
<h2 id="js模块化">JS模块化</h2>
<h3 id="概述">概述</h3>
<p>模块化就是将一个复杂的程序根据一定的规则封装成多个文件, 并进行组合.
使得模块内部数据/实现<strong>私有</strong>,
向外部暴露一些接口(方法)与外部模块通信</p>
<ul>
<li>早期没有模块化时, 所有代码写在一起, 十分容易污染global,
还会造成命名冲突(比如在一个模块定义了foo(),被另一个模块完全不知情的调用)</li>
<li>之后有了简单的Namespace模式, 也就是将变量分类封装到不同的对象中,
使用<code>对象.属性</code>的方法调用, 虽然减少了全局变量,
但是变量仍然不安全, 外界可以直接访问变量 <pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">"mod1"</span><span class="token punctuation">,</span>
  <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"foo()"</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>msg<span class="token punctuation">)</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
obj<span class="token punctuation">.</span><span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></li>
<li>后来发展出了IIFE模式, 也就是将功能封装到一个个立即执行函数里面,
外部无法访问内部的变量 <pre class="language-js" data-language="js"><code class="language-js"><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token string">"mod1"</span><span class="token punctuation">;</span>
  <span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"foo() "</span><span class="token punctuation">,</span> msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre></li>
<li>最后发展为引入依赖, 也就是将模块需要附着的对象传入模块,
在模块中将变量绑在传入对象上, 通过这种方式实现了按需加载与高可用性
<pre class="language-js" data-language="js"><code class="language-js"><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">window</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token string">"mod1"</span><span class="token punctuation">;</span>
  <span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"foo() "</span><span class="token punctuation">,</span> msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  window<span class="token punctuation">.</span>module5 <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
    foo
  <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span>
module5<span class="token punctuation">.</span><span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></li>
</ul>
<p>但是模块化也带来一些问题</p>
<ul>
<li>在调用外来库的时候每个库都要进行一次请求, 这样需要发送多个请求,
占用网络资源</li>
<li>模块之间存在依赖关系(例如必须先引用jQuery然后再引用jQuery的扩展)</li>
</ul>
<p>为了解决问题需要有模块化规范, 常见的模块化规范有</p>
<ul>
<li>CommonJS: 以Node.js为代表</li>
<li>AMD:</li>
<li>CMS: 阿里内部规范, 不常用</li>
<li>ES6:</li>
</ul>
<h3 id="commonjs">CommonJS</h3>
<p>每个文件都是一个模块,
模块在服务端加载是运行时<strong>同步</strong>加载的,
在浏览器端加载的时候需要<strong>提前编译打包</strong></p>
<ul>
<li>模块暴露:
<ul>
<li><code>exports.xxx = value;</code>暴露多个</li>
<li><code>module.exports = value;</code>暴露一个</li>
</ul>
暴露的本质就是暴露exports对象, exports本身是一个空对象,
可以使用<code>.</code>来增加对象, 也可以直接修改对象的值,
但是要使用module.exports,
否则到时候module.export与exports指向的位置不同s</li>
<li>引用模块: <code>require()</code></li>
<li>文档结构 <pre class="language-none"><code class="language-none">├── index.js      &#x2F;&#x2F; 入口JS文件
├── modules       &#x2F;&#x2F; JS模块
│   ├── module1.js
│   ├── module2.js
│   └── module3.js
└── package.json  &#x2F;&#x2F; 包文件</code></pre></li>
</ul>
<p>在服务器端想要使用CommonJS规范可以直接使用NodeJS中的require,
但是服务器端没有require我们需要将代码进行打包编译, 工具叫<a
target="_blank" rel="noopener" href="https://browserify.org/">Browserify</a></p>
<p>使用方法: -
<code>npm init</code>创建包文件package.json(注意包名不得有中文, 大写) -
创建文档结构 <pre class="language-none"><code class="language-none">├── index.html      &#x2F;&#x2F; 浏览器端测试文件
├── js              &#x2F;&#x2F; js文件夹
│   ├── dist        &#x2F;&#x2F; 转译打包后文件
│   └── src         &#x2F;&#x2F; CommonJS源文件
│       ├── app.js  &#x2F;&#x2F; 入口文件
│       ├── module1.js
│       ├── module2.js
│       └── module3.js
├── package.json
└── package-lock.json</code></pre> - 安装browserify <pre class="language-npm" data-language="npm"><code class="language-npm">sudo npm install browserify -g
npm install browserify --include&#x3D;dev</code></pre> 注意,
全局与局部都必须安装. dev表示开发依赖,
也就是这个npm模块只在开发的时候使用, 在生产环境无需安装,
dev依赖包会在json文件中标注 <pre class="language-json" data-language="json"><code class="language-json"><span class="token property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span>
  <span class="token property">"browserify"</span><span class="token operator">:</span> <span class="token string">"^17.0.0"</span>
<span class="token punctuation">&#125;</span></code></pre> - 转译输出 <pre class="language-js" data-language="js"><code class="language-js">browserify <span class="token punctuation">.</span><span class="token operator">/</span>js<span class="token operator">/</span>src<span class="token operator">/</span>app<span class="token punctuation">.</span>js <span class="token operator">-</span>o <span class="token punctuation">.</span><span class="token operator">/</span>js<span class="token operator">/</span>dist<span class="token operator">/</span>bundle<span class="token punctuation">.</span>js</code></pre>
输出名可以随便写</p>
<h3 id="amd">AMD</h3>
<p>AMD模块规范专门用于浏览器端, 为了防止阻塞, 模块加载是异步的,</p>
<p>基本语法 - 定义没有依赖的模块 <pre class="language-js" data-language="js"><code class="language-js"><span class="token function">define</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">return</span> 想要暴露的api<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span></code></pre> - 定义有依赖的模块,
将依赖使用字符串数组的形式引入, 函数列表中的m1,
m2分别对应了之前引用的依赖模块 <pre class="language-js" data-language="js"><code class="language-js"><span class="token function">define</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'dep-mod1'</span><span class="token punctuation">,</span><span class="token string">'dep-mod2'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">m1<span class="token punctuation">,</span>m2</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">return</span> 想要暴露的api<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span></code></pre></p>
<p>使用方法:</p>
<ul>
<li>amd在浏览器端需要依赖一个库<a
target="_blank" rel="noopener" href="https://requirejs.org/">require.js</a>, RequireJS是"A JAVASCRIPT
MODULE LOADER", 也就是用来解析加载JS依赖,
使用require.js的优势是网页只需要引入一个JS文件,
其余依赖require.js会自行处理</li>
<li>文档结构 <pre class="language-none"><code class="language-none">├── index.html
└── js                &#x2F;&#x2F; 存放所有的JS文件
    ├── app.js        &#x2F;&#x2F; 入口JS文件, 配置所有的模块位置
    ├── libs          &#x2F;&#x2F; 放第三方库
        ├── jQuery.js &#x2F;&#x2F; 比如我有一个jQuery
    │   └── require.min.js
    └── modules       &#x2F;&#x2F; 自己的模块文件
        ├── mod1.js
        └── mod2.js</code></pre></li>
<li>模块编写格式形如 <pre class="language-js" data-language="js"><code class="language-js"><span class="token function">define</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'mod1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">mod1</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">let</span> val <span class="token operator">=</span> <span class="token string">'mod2'</span><span class="token punctuation">;</span>
    <span class="token keyword">function</span> <span class="token function">showVal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> mod1<span class="token punctuation">.</span><span class="token function">getVal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>    
    <span class="token keyword">return</span> <span class="token punctuation">&#123;</span>showVal<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre> 这里的可以不必写mod1,
最后这个模块名与路径的映射还会单独在app.js中规定</li>
<li>配置app.js <pre class="language-js" data-language="js"><code class="language-js"><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>        <span class="token comment">// 这里配置每一个模块的位置</span>
  requirejs<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
    <span class="token literal-property property">baseUrl</span><span class="token operator">:</span><span class="token string">'/js'</span><span class="token punctuation">,</span> <span class="token comment">// 基本的路径 出发点正在根目录下 不配置时从main.js出发去找</span>
    <span class="token literal-property property">paths</span><span class="token operator">:</span><span class="token punctuation">&#123;</span>
      <span class="token literal-property property">mod1</span><span class="token operator">:</span><span class="token string">'./modules/mod1'</span><span class="token punctuation">,</span> <span class="token comment">// 不要加.js 默认会添加后缀</span>
      <span class="token literal-property property">mod2</span><span class="token operator">:</span><span class="token string">'./modules/mod2'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">jquery</span><span class="token operator">:</span><span class="token string">'./libs/jQuery'</span> <span class="token comment">// 也可以用三方库, 但是注意jQuery已经兼容AMD规范, 这时引用jQuery模块名必须叫做jquery</span>
    <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
  <span class="token function">requirejs</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'mod2'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">mod2</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>      <span class="token comment">// 在app.js中使用require.js引入模块的时候函数是requirejs不是require</span>
    mod2<span class="token punctuation">.</span><span class="token function">showVal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre></li>
<li>HTML引入, 指定入口文件 <pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">data-main</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js/main.js<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./js/libs/require.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>     </code></pre></li>
</ul>
<h3 id="cmd">CMD</h3>
<p>CMD与AMD类似, 但是CMD模块只有在使用的时候才会异步加载,
CMD的定义方式有点像CommonJS</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token function">define</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">require<span class="token punctuation">,</span> exports<span class="token punctuation">,</span> module</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">let</span> mod1 <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./mod1.js"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 同步引入</span>
  <span class="token keyword">let</span> mod2 <span class="token operator">=</span> require<span class="token punctuation">.</span><span class="token function">async</span><span class="token punctuation">(</span><span class="token string">"./mod2.js"</span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token parameter">mod2</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
    mod2<span class="token punctuation">.</span><span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 异步引入, 引入的回调</span>
  exports<span class="token punctuation">.</span>xxx <span class="token operator">=</span> value<span class="token punctuation">;</span>                <span class="token comment">// 导出</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span></code></pre>
<p>使用方法: <pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>text/javascript<span class="token punctuation">'</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./node_modules/sea.js/sea.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>text/javascript<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
  seajs<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token string">'./modules/app.js'</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre></p>
<h3 id="es6">ES6</h3>
<p>ES6还有很多语法浏览器不支持, 所以需要在上线时对数据进行打包编译为ES5,
方便识别, 编译工具是Babel, 打包工具是Browserify</p>
<p>语法</p>
<ul>
<li><code>export</code>
规定导出接口，与Node不太一样，只是前面加一个标识就可以了</li>
<li><code>import</code> 导入其他模块</li>
</ul>
<p>mod.js文件</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">export</span> <span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">"Hi"</span>
<span class="token keyword">export</span> <span class="token keyword">let</span> <span class="token function-variable function">nowis</span><span class="token operator">=</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre>
<p>index.html</p>
<pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">              <span class="token comment">// 要写type</span>
  <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> m1 <span class="token keyword">from</span> <span class="token string">"../mod.js"</span>   <span class="token comment">// 导入为m1</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>m1<span class="token punctuation">.</span><span class="token function">nowis</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>          <span class="token comment">// 调用方法</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
<p><strong>暴露数据的方法</strong></p>
<ul>
<li>分别暴露</li>
</ul>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">export</span> <span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">"Hi"</span>
<span class="token keyword">export</span> <span class="token keyword">let</span> <span class="token function-variable function">nowis</span><span class="token operator">=</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre>
<ul>
<li>统一暴露</li>
</ul>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">"Hi"</span>
<span class="token keyword">let</span> <span class="token function-variable function">nowis</span><span class="token operator">=</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token punctuation">&#123;</span>name<span class="token punctuation">,</span>nowis<span class="token punctuation">&#125;</span></code></pre>
<ul>
<li>默认暴露</li>
</ul>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">export</span> <span class="token keyword">default</span><span class="token punctuation">&#123;</span>
  <span class="token literal-property property">name</span> <span class="token operator">:</span> <span class="token string">"Hi"</span><span class="token punctuation">,</span>
  <span class="token function-variable function">nowis</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span><span class="token keyword">return</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span></code></pre>
<p>默认暴露需要修改html</p>
<pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> m1 <span class="token keyword">from</span> <span class="token string">"../mod.js"</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>m1<span class="token punctuation">.</span>default<span class="token punctuation">.</span><span class="token function">nowis</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>    <span class="token comment">// 多个default</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
<p><strong>浏览器引用模块的方法</strong></p>
<ul>
<li>通用引用方法</li>
</ul>
<pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> m1 <span class="token keyword">from</span> <span class="token string">"../mod.js"</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
<ul>
<li>解构的方式引用</li>
</ul>
<pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">&#123;</span>name<span class="token punctuation">,</span>nowis<span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">"../mod.js"</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
<p>如果两个模块有同名函数，解构后会出现变量名重复的问题，可以使用as进行变量名的替换，不影响解构</p>
<pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">&#123;</span>name<span class="token punctuation">,</span>nowis<span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">"../mod1.js"</span> <span class="token comment">// 有name nowis</span>
  <span class="token keyword">import</span> <span class="token punctuation">&#123;</span>name <span class="token keyword">as</span> name2<span class="token punctuation">,</span>lstis<span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">"../mod2.js"</span> <span class="token comment">// 有name lstis</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
<ul>
<li>针对默认暴露的简便模式</li>
</ul>
<pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> m1 <span class="token keyword">from</span> <span class="token string">"../mod1.js"</span> <span class="token comment">// 因为默认暴露只有一个参数，可以这么做</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
<p><strong>文件统一引用</strong></p>
<p>可以把所有模块引用都放在一起，然后直接引用这个文件</p>
<p>app.js</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> m1 <span class="token keyword">from</span> <span class="token string">"../mod1.js"</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> m2 <span class="token keyword">from</span> <span class="token string">"../mod2.js"</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> m3 <span class="token keyword">from</span> <span class="token string">"../mod3.js"</span></code></pre>
<p>index.html</p>
<pre class="language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./app.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<p><strong>将ES6代码转化为ES5代码</strong></p>
<p>在项目中考虑到项目兼容性，需要将项目的JS进行转化，需要的工具有</p>
<ul>
<li><p>Babel: 将ES6代码转化为ES5代码，但是是CommonJS规范</p></li>
<li><p>browserify:
打包工具，把CommonJS规范的JS转化为浏览器可读的，这里是简易打包，项目可能需要webpack</p></li>
<li><p>安装babel <pre class="language-js" data-language="js"><code class="language-js">sudo npm install babel<span class="token operator">-</span>cli browserify <span class="token operator">-</span>g
npm install babel<span class="token operator">-</span>preset<span class="token operator">-</span>es2015 <span class="token operator">-</span>dev</code></pre></p></li>
<li><p>定义配置文件<code>.babelrc</code>文件 <pre class="language-none"><code class="language-none">&#123;
  &quot;presets&quot;: [&quot;es2015&quot;]
&#125;</code></pre></p></li>
<li><p>文档结构 <pre class="language-none"><code class="language-none">├── js
│   └── src
│       ├── main.js
│       ├── mod1.js
│       ├── mod2.js
│       └── mod3.js
├── package.json
└── package-lock.json</code></pre></p></li>
<li><p>编译 <pre class="language-npm" data-language="npm"><code class="language-npm">babel js&#x2F;src -d js&#x2F;lib</code></pre></p></li>
<li><p>打包 <pre class="language-npm" data-language="npm"><code class="language-npm">browserify js&#x2F;lib&#x2F;main.js -o js&#x2F;lib&#x2F;bundle.js</code></pre></p></li>
</ul>
<p>浏览器最后引用<code>./bundle.js</code></p>
<p><strong>将npm包引入浏览器,jQuery为例</strong></p>
<p>bash</p>
<pre class="language-js" data-language="js"><code class="language-js">npm install jquery</code></pre>
<p>./src/js/app.js</p>
<pre class="language-js" data-language="js"><code class="language-js"><span class="token keyword">import</span> $ <span class="token keyword">from</span> <span class="token string">"jquery"</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"body"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"background"</span><span class="token punctuation">,</span><span class="token string">"pink"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>bash</p>
<pre class="language-js" data-language="js"><code class="language-js">npx babel <span class="token punctuation">.</span><span class="token operator">/</span>src<span class="token operator">/</span>js <span class="token operator">-</span>d <span class="token punctuation">.</span><span class="token operator">/</span>dist<span class="token operator">/</span>js <span class="token operator">--</span>preset<span class="token operator">=</span>babel<span class="token operator">-</span>preset<span class="token operator">-</span>env
npx browserify <span class="token punctuation">.</span><span class="token operator">/</span>dist<span class="token operator">/</span>js<span class="token operator">/</span>app<span class="token punctuation">.</span>js <span class="token operator">-</span>o <span class="token punctuation">.</span><span class="token operator">/</span>dist<span class="token operator">/</span>bundle<span class="token punctuation">.</span>js</code></pre>

    </div>

    
    
    
      


    <footer class="post-footer">
          <div class="reward-container">
  <div></div>
  <button>
    赞赏
  </button>
  <div class="post-reward">
      <div>
        <img src="/images/wechatpay.png" alt="Liu Kairui 微信">
        <span>微信</span>
      </div>
      <div>
        <img src="/images/alipay.png" alt="Liu Kairui 支付宝">
        <span>支付宝</span>
      </div>

  </div>
</div>

          

<div class="post-copyright">
<ul>
  <li class="post-copyright-author">
      <strong>本文作者： </strong>Liu Kairui
  </li>
  <li class="post-copyright-link">
      <strong>本文链接：</strong>
      <a href="http://liukairui.me/article/ES6-12%E4%B8%8E%E6%A8%A1%E5%9D%97%E5%8C%96%E7%AC%94%E8%AE%B0/" title="ES6-12与JS模块化笔记">http://liukairui.me/article/ES6-12与模块化笔记/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="noopener" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

          <div class="post-tags">
              <a href="/tags/%E5%89%8D%E7%AB%AF/" rel="tag"><i class="fa fa-tag"></i> 前端</a>
              <a href="/tags/%E7%AC%94%E8%AE%B0/" rel="tag"><i class="fa fa-tag"></i> 笔记</a>
              <a href="/tags/JavaScript/" rel="tag"><i class="fa fa-tag"></i> JavaScript</a>
              <a href="/tags/ES6/" rel="tag"><i class="fa fa-tag"></i> ES6</a>
              <a href="/tags/JS%E6%A8%A1%E5%9D%97%E5%8C%96/" rel="tag"><i class="fa fa-tag"></i> JS模块化</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/article/Ajax%E4%B8%8EAxios%E7%9A%84%E4%BD%BF%E7%94%A8%E4%B8%8E%E5%85%B3%E9%94%AE%E6%BA%90%E7%A0%81%E7%AC%94%E8%AE%B0/" rel="prev" title="Ajax与Axios的使用与关键源码笔记">
                  <i class="fa fa-chevron-left"></i> Ajax与Axios的使用与关键源码笔记
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/article/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C%E7%AC%94%E8%AE%B0/" rel="next" title="计算机网络(自顶向下)笔记">
                  计算机网络(自顶向下)笔记 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






    <div class="comments" id="valine-comments"></div>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 2019 – 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Liu Kairui</span>
</div>
<div class="busuanzi-count">
    <span class="post-meta-item" id="busuanzi_container_site_uv">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-item" id="busuanzi_container_site_pv">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>
  <div class="addthis_inline_share_toolbox">
    <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-6231eb6f709fc868" async="async"></script>
  </div><script
  async
  src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"
></script>

 
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment-precise-range-plugin@1.3.0/moment-precise-range.min.js"></script>
<script>
  function timer() {
    var ages = moment.preciseDiff(moment(),moment(20201101,"YYYYMMDD"));
    ages = ages.replace(/years?/, "年");
    ages = ages.replace(/months?/, "月");
    ages = ages.replace(/days?/, "天");
    ages = ages.replace(/hours?/, "小时");
    ages = ages.replace(/minutes?/, "分");
    ages = ages.replace(/seconds?/, "秒");
    ages = ages.replace(/\d+/g, '<span class="daysCnt" style="color:#1890ff">$&</span>');
    div.innerHTML = `我已在此等候你 ${ages}`;
    div.className="workDays";
  }
  var div = document.createElement("div");
  //插入到copyright之后
  var copyright = document.querySelector(".copyright");
  document.querySelector(".footer-inner").insertBefore(div, copyright.nextSibling);
  timer();
  setInterval("timer()",1000)
</script>



    </div>
  </footer>

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@next-theme/pjax@0.5.0/pjax.min.js" integrity="sha256-3NkoLDrmHLTYj7csHIZSr0MHAFTXth7Ua/DDt4MRUAg=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lozad.js/1.16.0/lozad.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script><script src="/js/pjax.js"></script>

  
<script src="https://cdn.jsdelivr.net/npm/hexo-generator-searchdb@1.4.0/dist/search.js" integrity="sha256-vXZMYLEqsROAXkEw93GGIvaB2ab+QW6w3+1ahD9nXXA=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>


  <script class="next-config" data-name="mermaid" type="application/json">{"enable":true,"theme":"forest","js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.14.0/mermaid.min.js","integrity":"sha256-7wT34TI0pEBeEFoi4z+vhuSddGh6vUTMWdqJ2SDe2jg="}}</script>
  <script src="/js/third-party/tags/mermaid.js"></script>

  <script src="/js/third-party/fancybox.js"></script>

  <script src="/js/third-party/pace.js"></script>

  
  <script data-pjax async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>


  <script class="next-config" data-name="leancloud_visitors" type="application/json">{"enable":true,"app_id":"ABKlVtS4cyaWYEwunPyK3sXt-9Nh9j0Va","app_key":"xxGXdTTEGEVifs2TLB35844I","server_url":"https://abklvts4.lc-cn-e1-shared.com","security":false}</script>
  <script src="/js/third-party/statistics/lean-analytics.js"></script>


  

  <script class="next-config" data-name="enableMath" type="application/json">true</script><script class="next-config" data-name="mathjax" type="application/json">{"enable":true,"tags":"none","mhchem":true,"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-mml-chtml.min.js"}}</script>
<script src="/js/third-party/math/mathjax.js"></script>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/quicklink/2.2.0/quicklink.umd.js" integrity="sha256-4kQf9z5ntdQrzsBC3YSHnEz02Z9C1UeW/E9OgnvlzSY=" crossorigin="anonymous"></script>
  <script class="next-config" data-name="quicklink" type="application/json">{"enable":true,"home":false,"archive":false,"delay":true,"timeout":3000,"priority":true,"url":"http://liukairui.me/article/ES6-12%E4%B8%8E%E6%A8%A1%E5%9D%97%E5%8C%96%E7%AC%94%E8%AE%B0/"}</script>
  <script src="/js/third-party/quicklink.js"></script>
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>

<script>
var options = {
  bottom: '64px',
  right: 'unset',
  left: '32px',
  time: '0.5s',
  mixColor: 'transparent',
  backgroundColor: 'transparent',
  buttonColorDark: '#100f2c',
  buttonColorLight: '#fff',
  saveInCookies: true,
  label: '🌓',
  autoMatchOsTheme: true
}
const darkmode = new Darkmode(options);
window.darkmode = darkmode;
darkmode.showWidget();
</script>


<script class="next-config" data-name="valine" type="application/json">{"enable":true,"appId":"ABKlVtS4cyaWYEwunPyK3sXt-9Nh9j0Va","appKey":"xxGXdTTEGEVifs2TLB35844I","serverURLs":"https://abklvts4.lc-cn-e1-shared.com","placeholder":"请开始你的表演","avatar":"identicon","meta":["nick","mail","link"],"pageSize":10,"lang":"zh-CN","visitor":false,"comment_count":true,"recordIP":true,"enableQQ":true,"requiredFields":[],"el":"#valine-comments","path":"/article/ES6-12%E4%B8%8E%E6%A8%A1%E5%9D%97%E5%8C%96%E7%AC%94%E8%AE%B0/"}</script>
<script>
document.addEventListener('page:loaded', () => {
  NexT.utils.loadComments(CONFIG.valine.el)
    .then(() => NexT.utils.getScript(
      'https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js',
      { condition: window.Valine }
    ))
    .then(() => {
      new Valine(CONFIG.valine);
    });
});
</script>


  <script async src="/js/fireworks.js"></script>




  <script src="/js/activate-power-mode.min.js"></script>
  <script>
    POWERMODE.colorful = true;
    POWERMODE.shake = false;
    document.body.addEventListener('input', POWERMODE);
  </script>




  <script src="/js/wobblewindow.js"></script>
  <script>
    //只在桌面版网页启用特效 记得同步到header.njk
    if( window.innerWidth > 768  ){
      $(document).ready(function () {
        
          $('body>main>header').wobbleWindow({
            radius: 50,
            movementTop: false,
            movementLeft: false,
            movementRight: false,
            debug: false,
          });
        

        //
        //  $('body header>aside').wobbleWindow({
        //    radius: 50,
        //    movementLeft: false,
        //    movementTop: false,
        //    movementBottom: false,
        //    position: 'fixed',
        //    debug: false,
        //  });
        //

        
          $('body>footer').wobbleWindow({
            radius: 50,
            movementBottom: false,
            movementLeft: false,
            movementRight: false,
            debug: false,
          });
        
      });
    }
  </script>


 
<script>
  $(document).ready(function(){
    var beian = document.querySelector(".footer-inner > .beian > a");
    var cpr=document.querySelector(".footer-inner > .copyright");
    var cnz=document.querySelector(".workDays");//.parentNode;
    var bsz=document.querySelector(".busuanzi-count");
    if(cnz!=null&&bsz!=null)
      cnz.parentNode.insertBefore(bsz,cnz);
    if(bsz == null || bsz == undefined || document.querySelector("#busuanzi_value_site_pv").innerText=="" || document.querySelector("#busuanzi_value_site_uv").innerText == "")
      bsz.remove();
    checkIndex();
    if(beian){cpr.classList.add('split-line');cpr.appendChild(beian);}
  })
  $(document).on('pjax:complete',checkIndex);
</script>



<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"log":false,"model":{"jsonPath":"/live2dw/assets/hijiki.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":false},"react":{"opacity":0.7}});</script></body>
</html>
